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

Question

iOS上有一个可滚动div的问题.当尝试通过触摸输入外滚动时,它滚动没有任何问题但是当我尝试滚动并触摸输入以开始滚动时(有很多机会它发生,因为它是一个带有大量输入的div )它滚动整个窗口而不是滚动div.我在桌面或Android中没有这个问题.我发现了一个类似的问题(iOS HTML输入标记停止在可滚动元素中滚动),但它也没有任何答案.虽然我找不到任何好的解决方案,但我决定touchmove在用户触摸输入时阻止该事件,但这并不是我想要的.

也许有人已经面临这个问题,可以提供帮助.我非常感谢,提前谢谢.

Answer 1

要在iOS 5+上滚动本机动态,您需要:

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

资料来源:溢出

也许你还需要:

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

来源:Stack Overflow中的类似问题

来源2:另一个类似的问题

Answer 2

这些东西让我疯狂,在测试了一切之后,我发现Thomas Bachem 在这里工作的以下答案,并使其在jquery中变得更简单.

只需scrollFix在输入中添加一个类就可以了.(或直接将js应用于任何输入/ textarea使用$('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);
});