0

问题：

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

当我尝试以下操作时：

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

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

我需要的：

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

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

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

1 2 3

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

4

1 回答 1

1

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

我的工作 jsbin 示例

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

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

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

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

玩它，让我知道我是否可以提供更好的例子，如果你遇到任何错误......现在我唯一知道的是你是否真的想打破它并开始在网站周围拉扯正在触发当前的 touchmove 事件，或者页面正在首次加载...我不会将这些视为“错误”，但如果您也可以找到解决这些问题的方法，我会全神贯注！

于 2012-12-19T17:39:42.830 回答