iOS8 Safari-webkit溢出滚动:触摸;问题

Question

因此，我们正在为一个在Safari中的iOS7上运行良好的客户端构建此web应用程序。但当我们在iOS8中查看该应用程序时，它出现了一些巨大的错误。

• 如果用户打开侧边栏并将其关闭，则<section style="overlay-y: scroll;"></section>中的内容将消失（覆盖部分）
• 有些按钮由于任何原因停止工作。（<a href="">Lala</a>）

当我们从容器（保存所有内容的div）中删除-webkit-overflow-scrolling: touch;时，一切都像过去一样完美…

有什么想法吗？

Answer 1

我也遇到了同样的问题！到目前为止，我还找不到真正的解决方案，但有一个不太理想的解决方案：

假设#container设置了-webkit-overflow-scrolling: touch属性，这个jQuery应该可以帮助您：

$('#container').css('-webkit-overflow-scrolling','auto');

或者对于javascript（未经测试）：

document.getElementById('container').style.webkitOverflowScrolling = 'auto';

这将禁用页面上的平滑轮盘式滚动。所以这并不理想，但您的页面现在应该可以正确滚动了。

编辑：

一些进一步的研究使我们发现了一种更巧妙的方法来解决这个问题，同时保持流畅的触摸滚动。假设你在css中的某个地方有-webkit-overflow-scrolling: touch，你可以"toggle"；它在你的JS中。我不确定你有什么可以显示/隐藏菜单，但希望你能利用它。

function toggleMenu(){
    $('#container').css('-webkit-overflow-scrolling','auto');
    //...Existing code
    setTimeout(function() {
        $('#container').css('-webkit-overflow-scrolling','touch');
    },500);
}

如果没有setTimeout，这对我来说不起作用。希望这能帮助你或其他人。

Answer 2

我在iOS8中遇到了这个问题，绑定到点击事件的所有按钮都无法正常工作。一般来说，我们会延迟300毫秒，但在某些时候，我需要按下几次以上才能触发它。

所以我也找到了这个解决方案，对我的解决方案有效。添加点击触摸端。

button.on('click touchend', function(event) {
  // this fires twice on touch devices
});

你可以在这里看到他们讨论的论坛。

JavaScript触摸端与点击困境

我希望这能有所帮助。

Answer 3

您的侧边栏是否有CSS动画？

我在Cordova网络应用程序中也遇到了同样的错误。经过一些实验，我发现问题是由通过css动画制作动画的父<div>（侧边栏）引起的，并且具有属性animation-fill-mode: forwards;

删除此属性解决了问题，并恢复了预期的-webkit-overflow-scrolling: touch行为

Answer 4

我的答案是：

$('#container').css('-webkit-overflow-scrolling','auto');

以前的解决方案不起作用：

document.getElementById('container').style.webkitOverflowScrolling = 'auto';