【问题标题】：iOS8 Safari -webkit-overflow-scrolling: touch; issueiOS8 Safari -webkit-overflow-scrolling：触摸；问题
【发布时间】：2014-11-04 15:21:42
【问题描述】：

因此，我们正在为一个客户端构建这个 Web 应用程序，该应用程序在 Safari 中的 iOS7 上完美运行。但是当我们在 iOS8 中检查该应用程序时，它有一些巨大的错误。

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

当我们从容器（包含所有内容的 div）中删除 -webkit-overflow-scrolling: touch; 时，一切都像以前一样完美无瑕......

关于它可能是什么的任何想法？

【问题讨论】：

Iframe scrolling iOS 8 的可能重复项

标签： html ios css

【解决方案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，您可以在您的 JS 中“切换”它。我不确定你有什么显示/隐藏菜单，但希望你可以利用它。

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

    //...Existing code

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

如果没有 setTimeout，这对我不起作用。希望这可以帮助您或其他人。

【讨论】：

很高兴听到。希望 Apple 和/或 webkit 的人们知道这个问题。
对我来说，该选项不起作用。我想尽量避免并用 js 编写修复代码。当我的容器的父元素具有绝对或相对位置时，我的容器的内容会发生类似的行为。如果没有该定位，则平滑滚动可以正常工作。将不胜感激，这将进一步讨论。 :)
到目前为止，我一直坚持使用这个解决方案，并且没有尝试过仅使用 css 的任何东西。其他地方有人提到使用transform3d(0,0,0)，但这对我不起作用。您可能想尝试一下。抱歉，我无法提供更多帮助。希望这是一个临时解决方案，直到 Apple 自行解决问题。
感谢您的精彩回答，救了我的培根！

【解决方案2】：

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

所以我也找到了适用于我的解决方案。通过点击添加 touchend。

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

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

JavaScript touchend versus click dilemma

希望对你有所帮助。

【讨论】：

【解决方案3】：

您的侧边栏是否有任何机会使用 CSS 动画进行动画处理？

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

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

【讨论】：

【解决方案4】：

我的回答是：

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

以前的解决方案无效：

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

【讨论】：