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

问题描述

我一直在使用移动webapp。我正在优化移动优先，专门针对iOS的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的感觉，走很长的路。幸运的是，当你在webapp中的可滚动元素的列表顶部以下，并滚动到顶部，你会得到相同的效果。这是行动中的所需行为：

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:

然而，当你在列表的顶部，并尝试重新创建弹出行为是列表的顶部（如上所示，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:

我看过一些类似 查询堆栈溢出，但这些都选择禁用弹跳。我想知道是否可以保持反弹，但总是让它发生在 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).

这里是一个 GitHub repo 与所有代码（Sinatra，HAML和Sass;当前分支 so ），或者一个 JSFiddle 损坏的图片和

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

推荐答案

旧版本的链接，但会在iPhone上显示相关问题（最好添加到主屏幕中进行测试）信息：我已解决此问题： 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屋！