Question

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

我想知道是否有办法检查当前活动/抓取/聚焦/无论是什么元素，如果是body / html将其更改为内容。

Answer 1

我通过使用preventDefault禁用所有元素的滚动并在stopPropagation

的某些元素上允许它来找到解决方案

我正在使用Sizzle（JQuery的选择器引擎）来选择DOM元素。您可以使用标准JS选择（document.getElementById等）替换$ selectors，但如果您不使用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);

Answer 2

最新更新：由于我使用iNoBounce.js解决了一个工作示例here: https://stackoverflow.com/questions/29894997，因此我取消了自己寻找解决方案的尝试。因此，这是我对此信息的最后一次修改。

在此，我提供我的working example。

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

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

2 个答案: