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

Question

在iOS的Safari书签上,有一个项目"iPad User Guide"或"iPad User Guid".打开它.您可以看到无法滚动整个页面.页面中的部分可以滚动.

我需要达到同样的效果.但我不想使用任何像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);

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