iPhone Web App - 停止身体滚动 [英] iPhone Web App - Stop body scrolling

问题描述

我正在创建一个 iPhone Web 应用程序，而您现在从 iOS5 开始就可以使用 position: fixed;用于标题等

I am creating an iPhone Web Application and you are now, since iOS5, able to use position: fixed; for headers etc. etc.

虽然它有效，但如果你在页面顶部向上滚动，它会在你无法再滚动之前显示通常的灰色区域

Although it works, if you scroll up at the top of a page, it displays the usual gray area for a while before you can't scroll anymore

有没有办法阻止这种滚动?我尝试过类似溢出:隐藏；但我似乎找不到任何东西.

Is there a way to stop this scrolling? I've tried things like overflow: hidden; but I can't seem to find anything.

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

P.S. I only want the one thing to stop scrolling, I have a div named #container which I still want to have the ability to scroll.

推荐答案

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

After reviewing several solutions, I began to create a custom solution:

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

bouncefix.add(el)

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

Apply fix so that the given element no longer causes a full body elastic bounce when scrolling at its extremes.

bouncefix.remove(el)

移除所有负责修复全身弹性弹跳的监听器/观察器.

Remove all listeners/observers responsible for fixing the full body elastic bounce.

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

Scrollfix was a good start, however I noticed several problems:

1. 它仅在有可滚动内容时有效.如果你有一个空页面，body 会出现弹跳效果.
2. API 没有公开删除侦听器的方法.我的应用程序将有多个页面，保留所有页面感觉不对当用户在应用中移动时附加的侦听器.

怎么样?

它使用与 scrollfix 类似的方法.当您处于滚动极端之一时会出现问题.在 touchstart 上，我们看看我们是在最上端还是最下端，如果我们在顶部，则添加 1px，如果我们在底部，则移除 1px.

How?

It uses a similar approach to that of scrollfix. The problem occurs when you are at one of the scrolling extremes. On touchstart, we look to see if we are at the top extreme or bottom extreme, adding 1px if we are at the top, and removing 1px if we are at the bottom.

不幸的是，这个技巧只有在我们能够设置 scrollTop 值时才有效.如果内容尚不可滚动，例如，您只有 1 个列表项，则整个正文将再次滚动.Bouncefix.js 将通过使用事件委托并在触发 touchstart 时根据 offsetHeight 检查 scrollHeight 来在幕后处理所有这些.在没有可滚动内容的情况下，容器上的所有滚动都被 e.preventDefault();

Unfortunately, this trick only works if we are able to set the scrollTop value. If the content is not yet scrollable, for example, you only have 1 list item, the whole body will again scroll. Bouncefix.js will take care of all of this behind the scenes by using event delegation and checking the scrollHeight against the offsetHeight anytime touchstart is triggered. In the case that there is no scrollable content, all scrolling on the container is blocked with e.preventDefault();

这篇关于iPhone Web App - 停止身体滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！