javascript - 防止 body 元素的滚动反弹，但在 iOS 中为子元素保留它

Question

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

这一切都没有问题，而且它还具有原生感觉、静态页眉和页脚以及可滚动的内部视图的优点（感谢-webkit-overflow-scrolling: touch）。

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

我觉得这有助于定义 iOS 的感觉，这样一个小细节可以大有帮助。幸运的是，当您在 web 应用程序的可滚动元素中位于列表顶部下方并滚动超过顶部时，您将获得相同的效果。这是期望的行为：

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

我在 Stack Overflow 上看到过一些类似的 问题，但这些都选择禁用弹跳。我想知道是否有可能继续弹跳，但总是让它发生在body section section#main，而不是 webapp 的 chrome 上。我没有使用 jQuery，所以我更喜欢直接使用 JavaScript 的答案（不过，CSS 解决方案的加分项）。

这是包含所有代码（Sinatra 、HAML和 Sass；当前分支是so

Answer 1

旧信息：我已经解决了这个问题：http ://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html

新信息：现在这是一个 jQuery 插件，可以从这里找到：http ://www.hakoniemi.net/labs/nonbounce/ 。

有几个问题，例如应用此功能时失去缩放功能或动态更新无法流畅运行。

但现在最简单的方法是定义：<div class="nonbounce">...</div>然后$.nonbounce();

Answer 2

我遇到了同样的问题并想出了这个解决方案：

http://demo.josefkjaergaard.com/stackoverflow/element_scroll/index.html

基本上我防止滚动内容处于其最大位置。这可以防止激活正文滚动。

它有效，但它确实在缓动结束时产生了一点点。通过更多的工作，这种行为可能会通过向相反方向偏移内容来隐藏。

Answer 3

以下是我在该主题上找到的一些有用资源：

• https://github.com/joelambert/ScrollFix
• http://apdevblog.com/optimizing-webkit-overflow-scrolling/
• http://www.hakoniemi.net/labs/nonbounce/
• http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
• http://cubiq.org/iscroll-4

Answer 4

这个伪代码怎么样：

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