iOS8 Safari -webkit-overflow-scrolling：触摸；问题

Posted 2023-03-14

【中文标题】iOS8 Safari -webkit-overflow-scrolling：触摸；问题

【英文标题】：iOS8 Safari -webkit-overflow-scrolling: touch; issue

【发布时间】：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 的可能重复项

【参考方案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';