如何在 iOS 的 Safari 上禁用网页的默认滚动效果？答案

【问题标题】：How to disable web page's default scroll effect on iOS' Safari?如何在 iOS 的 Safari 上禁用网页的默认滚动效果？
【发布时间】：2012-04-05 20:07:54
【问题描述】：

在 iOS 的 Safari 书签上，有一项“iPad 用户指南”或“iPad 用户指南”。打开它。您可以看到整个页面无法滚动。并且页面中的部分可以滚动。

我需要达到同样的效果。但是我不想用任何像 iScroll 这样的 JS 插件。

我使用下面的 JS 代码来禁用整个页面的默认滚动：

document.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);

然后使用 CSS 代码 -webkit-overflow-scrolling: touch; 启用滚动效果到 div 元素。

但问题是如果我使用我的 JS 代码，我的 CSS 代码将无法工作。当用户触摸移动时，我的div 元素无法滚动。

如何解决这个问题？谢谢！

【问题讨论】：

【解决方案1】：

老问题，所以我会为 iOS 15 提供帮助。我使用了它，它适用于 safari 以及独立的主屏幕书签，它们的行为略有不同。

body{
    position: fixed;
    width: 100vw;
    height: 100vh;

    /* optionally nice
    margin: 0px;
    padding: 0px;
    */
}

【讨论】：

【解决方案2】：

我来这里是为了解决移动 safari 中一个僵硬、半断的垂直滚动问题。

添加：

-webkit-overflow-scrolling: touch;

绝对可以，但如果您按照上面的顺序设置它，它会破坏overflow-x: hidden property。如果您希望达到相同的效果，您应该能够将这些样式应用到父 div。

【讨论】：

【解决方案3】：

您的代码有问题是document.addEventListener。正如您所指出的，向整个文档添加事件侦听器会给您带来麻烦。相反，您应该只将它添加到您不想让 iOS 溢出滚动的元素（任何正式名称？）。

添加-webkit-overflow-scrolling: touch; 将导致元素在该元素内进行惯性滚动，但它仅在元素内的第一次滚动时正常工作。因此，如果您点击可滚动元素的顶部或底部，并且再次滚动到顶部，它将移动整个页面而不仅仅是该元素。我知道没有解决方案可以正常工作。

最好的解决方案是为所有具有no-scroll 类的元素添加一个事件监听器。像这样（为简单起见，使用 jQuery 选择具有类的元素）：

$('.no-scroll').on('touchmove', function (event) {
  event.preventDefault();
}, false);

您可以通过将第二个滚动放入另一个可滚动元素中来防止第二个滚动产生任何影响。因此，如果可能的话，它将滚动父元素，而不是在双滚动时滚动整个页面。

【讨论】：