css – iPhone Web App – 停止正文滚动

前端之家收集整理的这篇文章主要介绍了css – iPhone Web App – 停止正文滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在创建一个iPhone Web应用程序,而现在,自从iOS5以来,可以使用position:fixed;头等等

虽然它有效,但如果您在页面顶部向上滚动,则会在一段时间之前显示通常的灰色区域,然后再无法滚动

有没有办法阻止这个滚动?我已经尝试过溢出:hidden;但我似乎找不到任何东西。

美国我只想要一个东西来停止滚动,我有一个名为#container的div,我仍然想要滚动的能力。

解决方法

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

bouncefix.js

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

用法

bouncefix.add(el)

应用固定,使得给定的元素在其极限滚动时不再导致全身弹性反弹。

bouncefix.remove(el)

删除所有听众/观察员负责修复全身弹性反弹。

为什么?

Scrollfix是一个很好的开始,但是我注意到了几个问题:

>只有当有可滚动内容时才有效。如果你有
空白页面,会发生对身体的反弹效果
> API没有公开一种删除监听器的方法。我的应用程序会
有多个页面,并没有保留所有的权利
用户随着应用程序的移动而附加的监听器。

怎么样?

它使用与scrollfix类似的方法。当您处于滚动极限之一时,会出现此问题。在touchstart上,我们看看我们是否处于顶级极限或最低点,如果我们位于顶部,则添加1px,如果我们在底部,则删除1px。

不幸的是,这个技巧只有在我们能够设置scrollTop值的情况下才有用。如果内容不可滚动,例如,您只有1个列表项,全身将再次滚动。 Bouncefix.js将通过使用事件委托来处理所有这些事件,并在触发启动触发器时检查scrollHeight对offsetHeight。在没有可滚动内容的情况下,容器上的所有滚动都将被e.preventDefault()阻止;

猜你在找的CSS相关文章