iPhone Web App - 停止正文滚动

Question

我正在创建一个iPhone Web应用程序,你现在,因为iOS5,能够使用position:fixed; 标题等

虽然它有效但是如果你向上滚动页面的顶部,它会显示通常的灰色区域一段时间,然后你就不能再滚动了

有没有办法阻止这种滚动？我尝试过像溢出这样的东西:隐藏; 但我似乎找不到任何东西.

PS我只想要一件事停止滚动,我有一个名为#container的div,我仍然希望能够滚动.

Answer 1

在回顾了几个解决方案之后,我开始创建一个自定义解决方案:

bouncefix.js

http://jaridmargolin.github.io/bouncefix.js/

用法:

bouncefix.add致发光(EL)

应用修复,以便在滚动极端时,给定元素不再导致全身弹性反弹.

bouncefix.remove致发光(EL)

移除所有负责修复全身弹性反弹的侦听器/观察者.

为什么？

Scrollfix是一个良好的开端,但我发现了几个问题:

1. 它只在有可滚动内容时才有效.如果您有一个空页面,则会发生对身体的反弹效果.
2. API没有公开删除侦听器的方法.我的应用程序将有多个页面,当用户在应用程序中移动时,保持所有侦听器附加的感觉并不合适.

怎么样？

它使用与scrollfix类似的方法.当您处于其中一个滚动极值时会发生此问题.在touchstart上,我们会看看我们是处于顶部极端还是底部极端,如果我们位于顶部则添加1px,如果我们位于底部则添加1px.

不幸的是,这个技巧只有在我们能够设置scrollTop值时才有效.例如,如果内容尚不可滚动,则只有1个列表项,整个主体将再次滚动.Bouncefix.js将通过使用事件委派和在任何时候触发touchstart时检查scrollHeight对offsetHeight来处理幕后的所有这些.在没有可滚动内容的情况下,使用e.preventDefault()阻止容器上的所有滚动;

Answer 2

什么对我有用:

html, body, .scrollable {
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
}

加(使用jQuery ...)

$(function() {
  $(document).on("touchmove", function(evt) { evt.preventDefault() });
  $(document).on("touchmove", ".scrollable", function(evt) { evt.stopPropagation() });
});

重要的是evt.stopPropagation()呼叫使用委托,因为它也被捕获在文档上但在最后一秒被取消.

实际上,这会捕获touchmove文档上的所有事件,但如果原始事件是从.scrollable我们冒泡stopPropagation而不是取消事件.

Answer 3

尝试将它放在JS文件的顶部..

document.ontouchmove = function(event){
    event.preventDefault();
}

这将阻止您完全滚动页面,因此您将无法在顶部看到"灰色区域".

来源:停止UIWebView垂直"弹跳"？

Answer 4

更新:

这个问题对很多人来说都很痛苦,但这是由bjrn创建的可靠解决方案:

演示: http ://rixman.net/demo/scroll/
这里有关于它的讨论:https://github.com/joelambert/ScrollFix/issues/2

这最初是由ryan在回答我的一个问题时发布的:防止touchmove默认父母但不是孩子.

我希望能帮助一些人.

原始答案:

我实际上正在研究完全相同的问题,我遇到过这个问题:

https://github.com/joelambert/ScrollFix

我已经尝试过了,它几乎完美无缺.如果你将所有代码复制到一个演示中并在iOS上进行操作,除非你抓住黑色条并尝试滚动它,否则你将看不到灰色背景.但是,应该很容易使用Ben提供的代码来防止这种情况发生(preventDefault()).

希望有所帮助(这绝对帮助了我!)将:)