聚焦输入时 iOS 上的触摸滚动问题答案

【问题标题】：Issues with touch scroll on iOS when focusing inputs聚焦输入时 iOS 上的触摸滚动问题
【发布时间】：2014-08-31 22:45:40
【问题描述】：

我在使用 iOS 上的可滚动 div 时遇到了一些问题。当尝试通过触摸输入外部进行滚动时，它可以正常滚动而没有任何问题，但是当我尝试滚动并触摸输入以开始滚动时（很有可能发生这种情况，因为它是一个有很多输入的 div ) 它滚动整个窗口而不是滚动 div。我在台式机或Android中都没有这个问题。我发现了一个类似的问题（iOS HTML Input Tag Stops Scrolling in Scrollable Element），但也没有任何答案。虽然我没有找到任何好的解决方案，但我决定在用户触摸输入时阻止事件touchmove，但这并不是我想要的。

也许有人已经遇到过这个问题并且可以提供帮助。非常感谢，在此先感谢。

【问题讨论】：

我面临同样的问题。见这里stackoverflow.com/questions/26784118/…。我在那里提供了详细信息或导致我的问题的原因。你能看看它是否适合你吗？
如果您的回答正确，请采纳

标签： html ios input scroll

【解决方案1】：

要在 iOS 5+ 上获得原生动量滚动，您需要：

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

来源：Overflow

也许你还需要：

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

来源：Similar question in Stack Overflow

来源 2：Another similar question

【讨论】：

这与 OP 的要求无关。问题是，如果您从文本框等输入（触发 touchmove 事件）启动拖动滚动，则整个文档滚动而不是内部可滚动区域。
这行得通，但不是把它放在 div 中。把它放在html或body中。 html { overflow: scroll; -webkit-overflow-scrolling: touch;}
该死的 IOS - 应该早点找到这个！
这应该是公认的答案，因为这是在不对页面可用性产生不利影响的情况下“解决”此问题的正确方法。

【解决方案2】：

这东西也让我抓狂，在测试了所有东西后，我发现 Thomas Bachem here 的以下答案在 jquery 中工作并使其更简单。

只需在输入中添加一个 scrollFix 类，您就可以开始了。（或者使用$('input, textarea')直接将该js应用到任何输入/文本区域

现在，当您在 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);
});

【讨论】：

一直在寻找修复 Iphone IOS9 的几个小时，并且效果很好。干杯。
尝试将其与 Ionic（混合网络包装器）一起使用。当谈到离子时，它有点不稳定。如果我点击输入，它将页面滚动到正确的位置并打开键盘，但它实际上并不专注于输入。至少对我来说这是一个好的开始。
这适用于滚动，但会使表单字段不可选择/因此您无法填写表单。

【解决方案3】：

Hacky 解决方法，但通过这样做，我甚至可以在表单输入上进行滚动。 JS 强制在渲染引擎中进行重排，这是 iOS8 Safari 中的错误所在。当聚焦表单元素时，将高度更改为自动也可以改善滚动，因为聚焦时浏览器会强制处理滚动。

标记：

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

CSS：

.modal-backdrop-container {
    z-index: 10;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}
.modal-backdrop {
    z-index: 10;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.modal {
    position: relative;
    width: 400px;
    max-width: 100%;
    margin: auto;
    background-color: white;
}

JS：

// 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': ''
            });
        });

不确定是否需要 var offsetHeight = modal.$backdrop[0].offsetHeight; 行，因为这和更改高度值都应该强制回流。

【讨论】：