Disabling iOS elastic body scroll & keep native scrolling working
Solution 1
I've adapted the good solution from Conditionally block scrolling/touchmove event in mobile safari using Dojo:
var initialY = null;
dojo.connect(document, 'ontouchstart', function(e) {
initialY = e.pageY;
});
dojo.connect(document, 'ontouchend', function(e) {
initialY = null;
});
dojo.connect(document, 'ontouchcancel', function(e) {
initialY = null;
});
dojo.connect(document, 'ontouchmove', function(e) {
if(initialY !== null) {
if(!dojo.query(e.target).closest('#content')[0]) {
// The element to be scrolled is not the content node
e.preventDefault();
return;
}
var direction = e.pageY - initialY;
var contentNode = dojo.byId('content');
if(direction > 0 && contentNode.scrollTop <= 0) {
// The user is scrolling up, and the element is already scrolled to top
e.preventDefault();
} else if(direction < 0 && contentNode.scrollTop >= contentNode.scrollHeight - contentNode.clientHeight) {
// The user is scrolling down, and the element is already scrolled to bottom
e.preventDefault();
}
}
});
The element to be scrolled is #content in this case.
Solution 2
Maybe iScroll is what you're looking for (if I got your question right)
madcapnmckay
I currently work for Netflix as UI Engineer. My interests include HTML5, Javascript, KnockoutJS, C# and all things web.
Updated on June 14, 2022Comments
-
madcapnmckay almost 2 years
I am currently working on a single page web app optimized for touch devices, mainly iOS. I've implemented the new iOS native scrolling via
-webkit-overflow-scrolling: touch;
and all works well except that we are still experiencing the apple elastic scroll effect on the whole page body.This involves the whole page moving off the top/bottom of the viewport when a scroll ends or the body is pushed and really gives away the fact that this is a web app. I have followed various guidelines on how to prevent this and while they do work, they prevent inner scrollable elements from working altogether.
Here's a fiddle to demonstrate what I'm using so far.
Has anyone found a solution that disables body elastic scrolling but lets inner scrollables work?