Html 聚焦输入时，iOS上的触摸滚动出现问题

我对iOS上的可滚动div有一些问题。当试图通过触摸输入外部来滚动时，它滚动正常，没有任何问题，但当我尝试滚动并触摸输入开始滚动时（有很多可能发生这种情况，因为它是一个有很多输入的div），它滚动整个窗口，而不是滚动div。我在桌面或Android中都没有这个问题。我发现了一个类似的问题（），但也没有任何答案。虽然我没有找到任何好的解决方案，但我决定在用户触摸输入时阻止事件

touchmove

，但这并不是我想要的

---

也许有人已经遇到了这个问题，可以提供帮助。我将非常感谢，提前谢谢。

要在iOS 5+上获得本机动量滚动，您需要：

div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

资料来源：

也许你还需要：

div > * {
    -webkit-transform: translateZ(0px);
}

资料来源：

---

资料来源2:

黑客的解决方法，但通过这样做，我能够使滚动工作，甚至对表单输入。JS强制在渲染引擎中进行回流，这就是iOS8 Safari中的错误所在。将“高度”更改为“自动”还可以改进聚焦于表单元素时的滚动，因为聚焦时浏览器会强制处理滚动

标记：

<div class="modal-backdrop-container">
  <div class="modal-backdrop">
    <div class="modal> <!-- Content --> </div>
  </div>
</div>

JS:

---

不确定

var offsetHeight=modal.$background[0]。offsetHeight行是必需的，因为这和更改高度值都会强制回流。
这件事也让我发疯，在测试了所有内容后，我从Thomas Bachem那里找到了以下答案，并在jquery中简化了它

只需在输入中添加一个类
scrollFix
，就可以开始了。（或者使用
$（'input，textarea'）

现在，当您在iOS 8+上触摸并滚动输入时，输入将禁用其所有“指针事件”（包括有问题的行为）。当我们检测到简单的触摸时，这些“指针事件”将启用

$('.scrollFix').css("pointer-events","none");

$('body').on('touchstart', function(e) {
    $('.scrollFix').css("pointer-events","auto");
});
$('body').on('touchmove', function(e) {
    $('.scrollFix').css("pointer-events","none");
});
$('body').on('touchend', function(e) {
    setTimeout(function() {
        $('.scrollFix').css("pointer-events", "none");
    },0);
});

我面临着同样的问题。请看这里。我在这里提供了详细信息，或者是什么原因导致了我的问题。你能看看这对你来说是否相同吗？请回答是否正确。这与OP的问题无关。问题是如果你从文本框（触发touchmove事件）等输入启动拖动滚动，整个文档将滚动而不是内部可滚动区域。这可以工作，但不是将其放在div中。将其放在html或正文中。
html{overflow:scroll；-webkit overflow scrolling:touch；}
该死的IOS-应该早就发现了！这应该是公认的答案，因为这是“修复”的正确方法这个问题不会对页面的可用性造成负面影响。我们花了几个小时寻找Iphone IOS9的修复程序，效果非常好。干杯。尝试使用Ionic（混合web包装器）。说到爱奥尼亚，它有点不稳定。如果我点击一个输入，它会将页面滚动到正确的位置并打开键盘，但实际上它不会关注输入。至少对我来说，这是一个好的开始。这可以用于滚动，但会使表单字段无法选择/因此你无法填写表单。
// reflow when changing input focus
        $modalInputs = $('.modal').find(':input');
        modalInputs.on('focus', function() {
            var offsetHeight = modal.$backdrop[0].offsetHeight;
            modal.$backdropContainer.css({
                'height': 'auto'
            });
        });
        modalInputs.on('blur', function() {
            var offsetHeight = modal.$backdrop[0].offsetHeight;
            modal.$backdropContainer.css({
                'height': ''
            });
        });

$('.scrollFix').css("pointer-events","none");

$('body').on('touchstart', function(e) {
    $('.scrollFix').css("pointer-events","auto");
});
$('body').on('touchmove', function(e) {
    $('.scrollFix').css("pointer-events","none");
});
$('body').on('touchend', function(e) {
    setTimeout(function() {
        $('.scrollFix').css("pointer-events", "none");
    },0);
});