防止body元素的滚动反弹,但保留iOS中的子元素

Question

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

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

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

我觉得这有助于定义iOS的感觉,这么小的细节可以走很长的路.幸运的是,如果您位于webapp中可滚动元素的列表顶部之下,并滚动到顶部,则会获得相同的效果.这是期望的行为:

但是,当您位于列表顶部并尝试重新创建相同的弹跳行为时,列表顶部(例如上面的设置.app),我们会得到以下行为,这是不希望的:

我在Stack Overflow上看过一些类似的 问题,但这些都选择禁用弹跳.我想知道是否可以保持弹跳,但总是让它发生body section section#main,而不是在webapp的chrome上.我不是在使用jQuery,所以我更喜欢使用直接JavaScript的答案(尽管CSS解决方案的奖励积分).

这是一个包含所有代码的GitHub 仓库(Sinatra,HAML和Sass;当前分支so),或者是带有损坏图像和链接的JSFiddle,但在iPhone上显示问题(最好添加到主屏幕进行测试).

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

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

它可以工作,但它在缓和结束时确实创造了一点点.通过更多的工作,可以通过以相反的方向偏移内容来隐藏这种行为.