joelambert / scrollfix Goto Github PK

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

JavaScript 57.42% CSS 42.58%

scrollfix's Introduction

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:

<div class="scrollable" id="scrollable">
	<ul>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ul>
</div>

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's People

Stargazers

Watchers

scrollfix's Issues

scrolls not applied to the 2nd popup

I am facing a problem with my Custom jQuery build Popups. I am giving a class “.scrollable” to the div “content” of my popup using the "scrollfix.js". The 1st popup gets the scroll. But the 2nd Popup does not. When I browse it in iPad, using a “weinre” remote debugging tool, it seems that it has got the class “.scrollable”. But there’s no scroll applied. Another thing, I noticed is that when I change the orientation from landscape to portrait & vice versa with my popup open. The popup gets the scroll. Can u please put a light on this..?? Like where I am exactly going wrong?? Thanks in advance.

Is this still an issue today?

I'm writing a PWA for iOS. It's a full screen app. And it's having this same issue. The whole app scrolls. Is this still an issue, and is using your solution the only way to prevent the app from getting scrolled?

@Iyzo @1yzo

another solution -- nested divs with overflow:touch

I stumbled upon a way to use native scroll, but sidestep the document-bounce behavior. I tested it with an iPad 1, using IOS 5.1.

If you build internal scrolling divs and you can declare explicit height/width for them, you can achieve this without javascript.

This approach uses a set of 3 nested divs. The innermost div is tall enough to kick in the scrolling behavior, the middle div is smaller than the outermost div, and I guess the outermost kills the propagation by evaluating for touch-scroll and coming back with "nothing to do" Or, I think that's what's happening.

OuterDiv -- fixed height, width, overflow-scrolling: touch;
MiddleDiv -- fixed height width, overflow-scrolling: touch; fits inside OuterDiv
InnerDiv -- fixed height width, bigger than MiddleDiv, so it kicks in the overflow behavior

Here's an example:
https://gist.github.com/1372229

This example does the triple-nested trick twice. The inner 3-wrapper-set uses no javascript (height and width are explicit CSS declarations). The outside 3-wrapper-set uses javascript to fetch the document height, so that it can be full-window-size. This approach allows native internal scrolls AND reaps the benefits of killing page-bounce for the overall document.

Before IOS 5 native internal scroll, the usual method to kill the page-bounce was....

document.body.addEventListener('touchmove', function(e) {
    // This prevents native scrolling from happening.
    e.preventDefault();
}, false);

And then you would have to build your own drag behavior.

I dunno how robust this hack is, I fear an upgrade to Safari might... "fix" this. But at the moment, it seems like you get the desired effect (internal scroll, no document bounce) almost for free.

Problem with bounce

Attempting a scroll when the scrolling section is rubber banding will cause the page to be moved rather that just the desired section.

I've been debugging with Weinre (http://debug.phonegap.com) and it appears that the scrollTop value is not correct when a bounce is happening. This might just be a throttled/network issue with Weinre but I suspect the rate at which the value is updated in the DOM isn't quick enough for our needs.

An example, scrolling to the top:

Start scroll: scrollTop = 386
Touch during rubber banding: scrollTop = 127 (should be < 0!)

I've also tried monitoring the scroll event to see if we can keep track of when the section is 'rubber banding' but it appears that, again, events are not fired quickly enough to reliably capture the rubber banding phase.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of joelambert/ScrollFix!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library joelambert/ScrollFix is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "joelambert/ScrollFix",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

elem = elem || document.querySeletor(elem);

elem = elem || document.querySeletor(elem);
when the expression 'document.querySeletor(elem);' will be triggered?

Is there a way to apply this to class?

Like if we have many scroll in a page with the same class.