防止 body 元素的滚动反弹，但为 iOS 中的子元素保留它 [英] Prevent scroll bounce for the body element, but keep it for child elements in iOS

问题描述

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

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 feeling of 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):

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

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).

任何使用 iOS 超过 5 分钟的人都知道，当您向上或向下滚动时，您会获得一些不错的滚动动力.此外，当您到达列表顶部时，您会获得不错的弹跳"效果:

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的感觉，这样一个小细节可以大有作为.幸运的是，当您位于 web 应用程序中可滚动元素的列表顶部下方，并滚动到顶部时，您会获得相同的效果.这是期望的行为:

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 behavior in action:

但是，当您位于列表顶部时，并尝试重新创建与列表顶部相同的弹跳行为(à la Setting.app，见上文)，我们得到以下行为，即 不需要:

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:

我见过一些类似的 <堆栈上的 href="https://stackoverflow.com/questions/9669670/how-to-disable-vertical-bounce-scroll-on-iphone-in-a-mobile-web-application">问题溢出，但这些都选择禁用弹跳.我想知道是否有可能继续弹跳，但总是让它发生在 body section section#main 上，而不是 webapp 的 chrome 上.我没有使用 jQuery，所以我更喜欢直接使用 JavaScript 的答案(不过，CSS 解决方案的加分项).

I've seen some similar questions on 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).

这是一个带有所有代码(Sinatra、HAML 和Sass；当前分支是 so)，或带有损坏图像的 JSFiddle和链接，但会在 iPhone 上显示相关问题(最好添加到主屏幕进行测试).

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

推荐答案

OLD INFO: 我已经解决了这个问题:http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html

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

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

NEW INFO: This is now a jQuery plugin that can be found from here: 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.

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

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

这篇关于防止 body 元素的滚动反弹，但为 iOS 中的子元素保留它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！