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

Prevent scroll bounce for the body element, but keep it for child elements in iOS

提问by Kyle Lacy

I've been working on a mobile webapp as of late. I'm optimizing mobile-first, focusing specifically on iOS for the iPhone right now. I don't want the precise look of a native app, but I think that the feelingof being native is of absolute importance. I've made the markup and CSS to reflect this idea, leaving me with this (annotated to better understand the problem I'm having later on):

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

This all works problem-free, and it also has the advantage of having a native feel, with static header and footer, and a scrollable inner view (thanks to -webkit-overflow-scrolling: touch).

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

As anyone who has used iOS for more than 5 minutes will know, when you scroll up or down, you get some nice momentum scrolling. Also, when you hit the top of a list, you get a nice 'bounce' effect:

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

I feel that this helps to define the feeling of iOS, and such a small detail can go a long way. Luckily, when you are below the top of a list in a scrollable element in a webapp, and scroll past the top, you get the same effect. This is the desired behaviorin action:

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

However, when you are at the top of the list, and try to recreate the same bouncing behavior a the top of the list (à la Setting.app, seen above), we get the following behavior, which is not desired:

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

I've seen some similarquestionson Stack Overflow, but these all opt for disabling bouncing. I'm wondering if it's at all possible to keep bouncing, but always make it occur on body section section#main, not on webapp's chrome. I'm not using jQuery, so I'd prefer answers to be in straight-up JavaScript (bonus points for a CSS solution, though).

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

Here's a GitHub repowith all of the code (Sinatra, HAML, and Sass; current branch is so), or a JSFiddlewith broken images and links, but shows the issue in question on an iPhone (best to add to homescreen to test).

这是一个包含所有代码（Sinatra、HAML 和 Sass；当前分支是）的GitHub 存储库so，或带有损坏图像和链接的JSFiddle，但在 iPhone 上显示了有问题的问题（最好添加到主屏幕进行测试）。

采纳答案by Samuli Hakoniemi

OLD INFO:I've solved this: http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html

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

NEW INFO:This is now a jQuery plugin that can be found from here: http://www.hakoniemi.net/labs/nonbounce/.

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

There are several issues, like losing the zooming capability when this is applied or it's dynamic updating isn't working fluently.

有几个问题，例如在应用时失去缩放功能或动态更新工作不流畅。

But now the simplest way is to define: <div class="nonbounce">...</div>and then $.nonbounce();

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

回答by Josef Kj?rgaard

I ran into the same problem and came up with this solution:

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

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

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

Basically I prevent the scroll-content from being in its maximum positions.This prevents the body-scroll from being activated.

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

It works but it does create a little snap at the end of the easing. With a little more work this behavior could probably be hidden by offsetting the content in opposite direction.

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

回答by philfreo

Here are some useful resources I found on the subject:

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

• 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

• 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

回答by Kernel James

How about this pseudo-code:

这个伪代码怎么样：

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