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

Question

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

我需要达到同样的效果。但是我不想使用任何JS插件(例如iScroll)。

我使用下面的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);

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