Disable iOS scroll scrolling and save your own scroll

Question

I am currently working on a one-page web application optimized for touch devices, mainly iOS. I implemented a new iOS scroll using -webkit-overflow-scrolling: touch; , and everything works well, except that we are still experiencing the effect of elastic scrolling of the apple on the whole body of the page.

This includes the entire page moving up / down in the viewport when the scroll ends or the body is pressed and really gives away the fact that this is a web application. I followed various recommendations on how to prevent this, and as long as they work, they do not allow working with internal scrollable elements.

Here's a script to demonstrate what I'm using so far.

Has anyone found a solution that disables body scrolling but allows internal scrolling?

Answer 1

I adapted a good solution from conditionally blocking scroll / touch event in a 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 item to be scrolled, in this case #content.

Answer 2

Perhaps iScroll is what you are looking for (if I understood your question correctly)

Answer 3

At the risk of duplicating my post, I am trying to solve the same problem, and so far I am only so far away:

  $(document).bind("touchmove",function(e){ e.preventDefault(); }); $('.scrollable').bind("touchmove",function(e){ e.stopPropagation(); }); 

This works if you have an overflow element that does not cover the entire screen, for example, in the iPad application. but it doesn’t work if you have a mobile application and the entire viewport is covered with your overflowing element.

The only thing I could think of is checking scrollTop () for $ ('. Scrollable'), and then conditionally link preventDefault () if it is 0.

After trying, I noticed that webkit UA tells scrollTop always as 0 when the element scrolls up, even when it performs an “internal bounce” of the native overflow scroll. Therefore, I cannot do anything, since I will need a negative scrollTop to set my condition.

Sigh. Disappointment.