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

Question

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

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

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

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

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

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

如何解决此问题？谢谢！

Answer 1

您的代码存在问题document.addEventListener。如上所述，在整个文档中添加事件监听器会让您遇到麻烦。相反，你应该只将它添加到你不想让iOS溢出滚动的元素（任何正式名称？）。

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

最佳解决方案将为具有no-scroll的类的所有元素添加事件侦听器。像这样（使用jQuery选择带有类的元素以简化）：

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

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

Answer 2

我来到这里寻找修复移动野生动物园中严格的半破垂直滚动问题。

添加：

-webkit-overflow-scrolling: touch;

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