Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Tidied up code and added documentation for known bounce issue

  • Loading branch information...
commit 14c0b16971c0a8409a3575d29bee04581dc6ccc3 1 parent 820fd54
@joelambert joelambert authored
Showing with 12 additions and 39 deletions.
  1. +7 −1 README.md
  2. +5 −38 scrollfix.js
View
8 README.md
@@ -1,6 +1,6 @@
# ScrollFix
-ScrollFix is a small script that works around the most common issue with using iOS5's `overflow: scroll` for fullscreen web apps.
+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:
@@ -30,6 +30,12 @@ Then call the following code on the area that has the `overflow: scroll` propert
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](https://github.com/joelambert/ScrollFix/issues/1#issuecomment-2421225) better explains the issue, Apple are aware of the problem (thanks to [Matteo Spinelli](http://www.twitter.com/cubiq)), hopefully this will be resolved in iOS 5.1.
# License
View
43 scrollfix.js
@@ -11,14 +11,10 @@ var ScrollFix = function(elem) {
// Variables to track inputs
var startY = startTopScroll = deltaY = undefined,
- // Create a lock to prevent multiple interference per interaction
- modifiedY = false,
+ elem = elem || elem.querySelector(elem);
- // Get the first child of the element and treat it as the content
- content = elem.querySelector('*');
-
- // If there is no content, then do nothing
- if(!content)
+ // If there is no element, then do nothing
+ if(!elem)
return;
// Handle the start of interactions
@@ -26,39 +22,10 @@ var ScrollFix = function(elem) {
startY = event.touches[0].pageY;
startTopScroll = elem.scrollTop;
- // Reset the lock
- modifiedY = false;
-
- //console.log('start (top):', startTopScroll);
- //console.log('start (bottom):', startTopScroll + elem.offsetHeight, content.offsetHeight);
-
if(startTopScroll <= 0)
elem.scrollTop = 1;
- if(startTopScroll + elem.offsetHeight >= content.offsetHeight)
- elem.scrollTop = content.offsetHeight - elem.offsetHeight - 1;
- }, false);
-
- // Handle movements
- elem.addEventListener('touchmove', function(event){
- deltaY = event.touches[0].pageY - startY;
-
- // Is the content currently at the top?
- if(startTopScroll == 0 && deltaY > 0 && !modifiedY) {
- // Offset the scroll position to prevent Safari scrolling the whole page
- elem.scrollTop = 1;
- modifiedY = true;
- event.stopPropagation();
- }
-
- //console.log(startTopScroll, elem.offsetHeight, content.offsetHeight);
-
- // Is the content currently at the bottom?
- if(startTopScroll + elem.offsetHeight == content.offsetHeight && !modifiedY) {
- // Offset the scroll position to prevent Safari scrolling the whole page
- elem.scrollTop = startTopScroll-1;
- modifiedY = true;
- event.stopPropagation();
- }
+ if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
+ elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
}, false);
};
Please sign in to comment.
Something went wrong with that request. Please try again.