Ipad iOS 滚动不一致：禁用正文滚动但允许在某些元素上滚动

Posted 2023-03-14

【中文标题】Ipad iOS 滚动不一致：禁用正文滚动但允许在某些元素上滚动

【英文标题】：Ipad iOS inconsistent scrolling: disable body scroll but allow scroll on certain elements

【发布时间】：2014-04-16 22:35:43

【问题描述】：

在我的网站上，我有一个固定页面内的可滚动菜单和内容。通常在加载页面时，这些元素会毫无问题地滚动。但是，当 body/html 元素被抓取/聚焦在页面上时，它只会反弹，并且可滚动元素变得不可滚动。有时 body/html 会自动聚焦。可以通过单击可滚动元素中的某些内容来修复此行为，从而调整焦点。

我想知道是否有办法检查哪些元素当前处于活动状态/抓取/聚焦/其他内容，以及是否是 body/html 将其更改为内容。

【问题讨论】：

请提供一些源代码，可能是html页面。很难理解是什么导致了一些问题。

@MatrosovAlexander 我没有添加代码，因为有太多考虑因素可能会影响我的问题。不过我想通了...在 touchmove 事件侦听器上为 body/html 使用 preventDefault，然后在 touchmove 上为所有可滚动元素使用 stopPropagation 解决了这个问题。有兴趣可以看我的回答。我一直试图弄清楚如何做到这一点，该解决方案对于控制触摸设备上的滚动行为非常有用。

ios Safari – How to disable overscroll but allow scrollable divs to scroll normally? 的可能重复项

【参考方案1】：

我找到了解决方案，方法是使用 preventDefault 禁用所有元素的滚动，并使用 stopPropagation 允许在某些元素上滚动

我正在使用 Sizzle（JQuery 的选择器引擎）来选择 DOM 元素。您可以将 $ 选择器替换为标准 JS 选择（document.getElementById 等），但如果您不使用 jQuery，我强烈建议您使用 Sizzle。

防止在所有元素上滚动：

document.addEventListener('touchmove', function(e)e.preventDefault(), false);
$('body')[0].addEventListener('touchmove', function(e)e.preventDefault(), false);

允许滚动某些元素：

$('#SCROLLABLE_DIV')[0].addEventListener('touchmove', function(e)e.stopPropagation(), false);

【讨论】：

像往常一样 e.preventDefault() 挽救局面

【参考方案2】：

最新更新首先：我取消了自己寻找解决方案的尝试，因为我找到了一个使用 iNoBounce.js 的工作示例here: https://***.com/questions/29894997。 因此，这是我对这篇文章的最后一次编辑。

我特此提供我的working example。

您仍然可以在此处找到我的示例的旧版本 how to prevent body scrolling on mobile devices