Need help with ScrollFix?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

joelambert
456 Stars 64 Forks 11 Commits 9 Opened issues

Description

Small script to fix some of the issues with iOS5's overflow:scroll;

Services available

!
?

Need anything else?

Contributors list

# 77,030
PHP
HTML
WordPre...
timber
7 commits
# 302,885
HTML
CSS
leaflet
gis
2 commits

ScrollFix

ScrollFix is a small script that partially works around the most common issue with using iOS5's

overflow: scroll
for fullscreen web apps.

The newly support

overflow:scroll
is a great addition and works well except under the following conditions:
  • The scroll area is at the top and the user tries to scroll up
  • The scroll area is at the bottom and the user tries to scroll down.

In a native app, you'd expect the content to rubber band but in Safari the whole page is scrolled instead. Under occasions where you've deliberately hidden the browser chrome, this interaction can bring it back into view.

ScrollFix works around this by manually offsetting the

scrollTop
value to one away from the limit at either extreme, which causes the browser to use rubber banding rather than passing the event up the DOM tree.

How to use

Setup a scrollable section:

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Then call the following code on the area that has the

overflow: scroll
property:
var scrollable = document.getElementById("scrollable");
new ScrollFix(scrollable);

Known Issues

ScrollFix doesn't prevent the page from being scrolled when if a touch is registered whilst the scrolling section is bouncing (rubber banding). This is an issue I don't think can be worked around with the current implementation of iOS5's

overflow: scroll
.

This ticket better explains the issue, Apple are aware of the problem (thanks to Matteo Spinelli), hopefully this will be resolved in iOS 5.1.

License

ScrollFix is Copyright © 2011-2013 Joe Lambert and is licensed under the terms of the MIT License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.