防止正文元素在触摸设备上滚动

Question

问题：

我在 iOS 主屏幕上有一个 Web 应用程序，所以没有浏览器窗口，它看起来和功能都很好。我已经弄清楚如何让内部 div 元素执行触摸滚动事件并在 iOS 中使用动量/反弹样式，并且效果很好......我现在遇到的问题是反弹滚动（同样，仅限 iOS ) 搞乱了我在页面上的任何固定元素或与网站相关的动画。

当我尝试以下操作时：

document.ontouchmove = function(e) {e.preventDefault()};

问题停止了，但现在我无法在我的应用程序上滚动任何地方。

我需要什么：

我希望 body 完全锁定到位...如果有人抓住我的侧边栏或导航栏然后拉动页面，body 会弹跳！但是，如果有人在内容区域内，则完全没有问题——应用程序可以完美滚动并且看起来很棒。如果我停止在侧边栏、导航栏或正文上滚动，则应用程序中的所有滚动都将不起作用并且基本上不起作用。

tl;dr：身体在滚动时反弹。我想要一个滚动的内容区域，而在其他任何地方都没有滚动。身体不应该移动，但我认为可以在身体内滚动的元素应该。

作为旁注，我浏览了以下热门问题/解决方案（以及许多其他问题）：

1 2 3

我只是想在人们认为我没有进行任何搜索之前将其发布...我已经在这里工作了几个小时，并且看到了比上面发布的更多的解决方案，但我想得到上面列出的最受欢迎的问题，所以没有人认为这是一个重复的问题。

Answer 1

几天前我发现了这一点，并设置了这个方便的 jsbin 来演示我为完成这项工作所做的工作：

My Working jsbin Example

当您在 iPad 上打开此链接时，文本应该是可滚动的。当当前没有 touchmove 事件在起作用时，尝试拉动屏幕的其余部分。

如果您使用它，您会注意到只有内部文本字段会按预期移动。这是通过将我的.scrollable 类放在.container 类中来确定的。 .scrollable 类占据了它的父容器的整个高度。

现在使容器的高度更大，例如height: 500px。这里的目标是让它足够大，不会溢出，但又足够小，以便在 iPad 上还有其他空白。尝试滚动或拉动它...没有触发 touchmove 事件并且屏幕保持原位。

我的 JS 判断一个对象在被触摸后是否溢出。如果是，它会滚动。如果没有，则不会发送滚动事件。

试试看，如果我能提供更好的例子，如果你遇到任何错误，请告诉我......现在我知道的唯一一个是你是否真的想打破它并开始拖拉正在触发当前 touchmove 事件或页面首次加载时的站点...我不会将这些视为“错误”，但如果您也能找到解决这些问题的方法，我会全力以赴！