相关疑难解决方法(0)

我最近一直在研究移动网络应用程序.我正在优化移动优先,现在专注于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上显示问题(最好添加到主屏幕进行测试).