Question

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

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

Answer 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

Answer 2

这些东西让我疯狂，在测试完所有内容后，我发现Thomas Bachem here的以下答案正在工作，并且在jquery中更简单。

只需在输入中添加一个类scrollFix，即可开始使用。（或使用$('input, textarea')

将js直接应用于任何输入/ 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);
});

Answer 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;行，因为这一行和更改高度值都会强制重排。

Answer 4

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

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

4 个答案: