Javascript 阻止body元素的滚动反弹，但在iOS中保留子元素的滚动反弹

最近我一直在开发一个移动网络应用程序。我正在首先优化手机，现在特别关注iPhone的iOS。我不想要一个本地应用程序的精确外观，但我认为本地的感觉是绝对重要的。我制作了标记和CSS以反映这一想法，留下了以下内容（注释以更好地理解我以后遇到的问题）：

这一切工作起来都没有问题，而且它还有一个优点，即具有本地的感觉，带有静态页眉和页脚，以及可滚动的内部视图（感谢

-webkit overflow scrolling:touch

）

任何使用iOS超过5分钟的人都会知道，当你向上或向下滚动时，你会获得很好的滚动动力。此外，当你点击列表顶部时，你会得到一个很好的“反弹”效果：

我觉得这有助于定义iOS的感觉，这样一个小细节可以起到很大的作用。幸运的是，当您位于webapp中可滚动元素的列表顶部下方，并滚动到顶部之后，您会得到相同的效果。这是行动中所需的行为：

但是，当您位于列表的顶部，并尝试在列表的顶部重新创建相同的反弹行为时（a la Setting.app，如上所示），我们会得到以下行为，这是不需要的：

我见过一些堆栈溢出，但这些都选择禁用反弹。我想知道是否有可能保持跳跃，但总是让它出现在

主体部分#main

，而不是webapp的chrome。我没有使用jQuery，所以我更希望答案是直接的JavaScript（不过CSS解决方案也有好处）

---

下面是一个包含所有代码（Sinatra、HAML和Sass；当前分支是

so

），或者是一个包含断开的图像和链接的分支，但显示了iPhone上存在的问题（最好添加到主屏幕进行测试）。

旧信息：我已经解决了这个问题：

新信息：这现在是一个jQuery插件，可以从这里找到：

有几个问题，例如应用此功能时会丢失缩放功能，或者动态更新不流畅

---

但现在最简单的方法是定义：

..

然后定义

$.nonbounce（）
这个伪代码怎么样：

document.body.addEventListener("ontouchstart", function(event) {
  if(document.getElementById("main").scrollTop > 0) return;
  event.preventDefault();
  event.stopPropagation();
}, false);

我遇到了同样的问题，并提出了以下解决方案：


基本上，我阻止滚动内容处于其最大位置。这会阻止主体滚动被激活

这是可行的，但在缓和结束时确实会产生一点小的冲击。如果再多做一点工作，这种行为可能会通过将内容向相反方向偏移来隐藏。
以下是我在该主题上找到的一些有用资源：







CSS解决方案将是理想的解决方案。我真的很想给这个问题一个好的答案，所以我要加上一笔赏金。你已经看过了吗？我使用了一个旧版本的几乎2年了，它看起来和你们想要的一模一样。如果这有点过分，你可以看看@barts，我刚刚查看了jQtouch，但它似乎并没有纠正眼前的问题。可能只是我，但我在iPhone上试过这个演示，它似乎也有同样的问题。而且，我以前也看过iScroll，我总是觉得它“不合适”。动量逻辑总是有一点点偏离。即使它与iOS的逻辑是1:1，在其他平台上也不会感觉正确。我在这里发布了一个CSS解决方案：关键是将内容包装在三个webkit溢出滚动：touch divs。我也在ios7gm中测试了这个解决方案。如果我没有弄错的话，您的小型库选择在越过元素的“边界”时禁用滚动。对不起，如果不够清楚的话，我想问一种方法，允许橡胶条绑在一个元件上，而不是身体上。这似乎是可行的。你能更详细地谈谈你是如何做到这一点的吗？如果我没有正确理解你的方法，请纠正我。看起来您正在禁用传递到
nobounce
函数的任何元素上的
touchstart
事件。当内容位于顶部和底部时，为什么还要禁用
touchmove
事件？您是否发布过有关该主题的更多信息？在我所看到的解决方案中，这似乎是最好的。这看起来是个好主意，但当我实现它时，它只是禁止到处滚动。我不知道我是否做错了什么。据我所知，这段代码只是选择禁用顶部以外的滚动。对不起，如果我说得不够清楚，但这是我不想要的行为。相反，我希望在子元素（
#main
）上保留橡皮筋，但在
主体上禁用它。这是迄今为止最接近的一次。有关于12倍“快照”的更新吗？我喜欢这种逻辑。您没有阻止某个条件的结果（例如，当div滚动到顶部时，页面反弹），而是阻止该条件。好极了我尝试了几种不同的“解决方案”。这是我遇到的最好的一个。原因：document.getElementById（“内容”）.scrollHeight-$（“#内容”）.height（）；vs document.getElementById（“内容”）.scrollHeight-document.getElementById（“内容”）.height（）；或者var content=document.getElementById（“content”）->然后使用该变量？请不要只是链接到一堆其他网站。解释每一个是什么以及为什么它是相关的将非常有帮助。否则，您只需引导用户点击一个链接即可。