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

问题描述

我创建了一个iPhone Web应用程序，你现在，从iOS5，能够使用position：fixed;标题等。

虽然它可以工作，如果你向上滚动页面的顶部，它显示一般灰色区域一段时间，卷动

有没有办法停止这个滚动？我试过像overflow：hidden;但我似乎找不到任何东西。

我只想让一个东西停止滚动，我有一个名为#container的div，我仍然希望能够滚动。

解决方案

查看了几个解决方案后，我开始创建自定义解决方案：

bouncefix.js

a href =http://jaridmargolin.github.io/bouncefix.js/> http://jaridmargolin.github.io/bouncefix.js/

用法：

bouncefix.add（el）

套用因此，当滚动到极限时，给定的元素不再引起全身弹性反弹。

bouncefix.remove（el） >

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

为什么？

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

1. 它只在有可滚动内容时才起作用。如果你有一个
   空页面，会对body产生反弹效应。


2. API没有公开一个方法来删除侦听器。我的应用程序将
   有多个页面，并且不愿意保持所有的
   监听器附加为用户移动的应用程序。

如何？

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

不幸的是，这个技巧只有当我们能够设置scrollTop的值。如果内容还不能滚动，例如，您只有1个列表项，整个主体将再次滚动。 Bouncefix.js将通过使用事件委托和检查scrollHeight来抵消offsetHeight在触发touchstart的任何时候处理幕后所有的事情。在没有可滚动内容的情况下，容器上的所有滚动都被e.preventDefault（）;

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.

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:

bouncefix.js

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

Usage:

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.

Why?

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

1. It only worked when there was scrollable content. If you had an empty page, the bounce effect on the body would occur.
2. The API did not expose a method to remove the listeners. My app will have multiple pages, and it didn't feel right to keep all of the listeners attached as the user moved around the app.

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.

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应用程序 - 停止身体滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！