防止 iOS 11.3 溢出弹跳

Posted 2023-03-14

【中文标题】防止 iOS 11.3 溢出弹跳

【英文标题】：Prevent iOS 11.3 overflow bouncing

【发布时间】：2018-04-19 16:52:40

【问题描述】：

从现在开始，我一直在 touchmove 事件中使用 preventDefault 技术，当我注意到它在 ios 11.3 上似乎不再适用于 Safari、Chrome 或 Firefox 时：

document.ontouchmove = function(event)
    event.preventDefault();
 

iOS 现在有什么变化吗？防止页面顶部或底部弹跳的方法是什么？

Reproduction online

Reproduction online with jQuery

视频在这里：

【问题讨论】：

仅供参考：无法复制，iOS 11.3、Chrome、iPhone6s

嗯……这很奇怪……我重新启动看看。

不，我仍然可以复制它。

好的，我用 safari 试过了，我可以重现

我已经在另一部装有 iOS 11.3 的手机（iphone 5S）上对其进行了测试，但无法重现。这相当很奇怪......因为我可以在所有命名的浏览器以及其他 iPhone 中在我的 (iphone 7) 中重现它。

【参考方案1】：

这是由 WebKit 的一个错误引起的。 Bug 182521

试试

window.addEventListener("touchstart", function(event) 
  event.preventDefault();
, passive: false);

作为一种解决方法。

【讨论】：

我得到“preventBouncing is not defined”

这完全禁用了滚动

【参考方案2】：

除了暴食回答：

window.addEventListener("touchmove", function(event) event.preventDefault();, passive: false );

对我来说是 Safari 弹跳问题的有效解决方案。

【讨论】：

是的，同样的事情。您可以对 touchmove 或 touchstart 使用被动处理程序并阻止它。

这可行，但也可以锁定在模态框内