Issue with a scrollable div on ipad

Question

I'm designing an HTML/JS app for consumption specifically on iPad. In the app, there are some scrollable elements.

I set the document's width and height to 1024 and 768 respectively. I set the view port to

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

I then use class

.scrollable {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

for the scrollable divs to make them scroll properly. Finally, I use a bit of javascript to stop overscroll on the document itself while allowing for scrollable divs and lists:

$(document).on('touchmove',function(e){
    e.preventDefault();
});

//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {
    if (e.currentTarget.scrollTop === 0) {
        e.currentTarget.scrollTop = 1;
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
        e.currentTarget.scrollTop -= 1;
    }
});

//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
    e.stopPropagation();
});

All of this works - mostly. However there is one snag. If the scrollable element does not contain enough content to require scrolling, attempting to scroll it starts the overscroll on the whole document. I've read through hundreds of blogs and other SO questions, but can't find a solution to this. Any ideas are greatly appreciated.

It's not as simple, as the scrollable classes are in different places with heights determined dynamically at runtime. — Aleks G, May 08 '13 at 10:49

score 2 · Answer 1 · answered May 08 '13 at 16:50

2

After so much fighting with it, the answer turned out to be quite simple: when the scrolling starts, compute the total size of the content and compare it with the size of the scrollable element - if the content is smaller, prevent scrolling. So, the last function changes from

$('body').on('touchmove','.scrollable',function(e) {
    e.stopPropagation();
});

to a slightly more complex

$('body').on('touchmove','.scrollable',function(e) {
    var tot = 0;
    $(this).children('li:visible').each(function() { tot += $(this).height(); });
    if(tot > $(this).innerHeight()) {
        e.stopPropagation();
    }
});

And that's it, really.

answered May 08 '13 at 16:50

Aleks G

56,435
29
168
265

1

while this question is a bit old, I was attempting to solve the same issue, and the solution works, but can generalized and simplified a bit (and is probably a little faster too) by changing the code in the body touchmove listener to: `if($(this).get(0).scrollHeight > $(this).innerHeight()) { e.stopPropagation(); }` – Bill Dami Nov 26 '13 at 16:34
1

That's now on the original answer (http://stackoverflow.com/a/14244680/40352). One danger is that scrollHeight is not fully supported on all browsers. – Chris Nov 26 '13 at 17:54

score 0 · Answer 2 · answered Oct 08 '14 at 17:59

If you can live with the poor scroll performance, then you can try this example :

* use this to prevent the touch so that the browser does not bounce * http://gregsramblings.com/2012/05/23/preventing-vertical-scrolling-bounce-using-javascript-on-ios-devices/

var xStart, yStart = 0;
document.addEventListener('touchstart',function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
});
document.addEventListener('touchmove',function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

* use this to catch a swipe down or up, so that you can make your own scroll *

function init_swipe()
{

    x$("#main_body").swipe(
    function(e, data){
            if (data.direction == 'down')
            {
                var offset=window.scrollY+data.deltaY*100;
                $('html,body').animate({scrollTop: offset},200);
            }
            if (data.direction == 'up')
            {
                var offset=window.scrollY+data.deltaY;
                $('html,body').animate({scrollTop: offset},200);
            }
    }, {
        swipeCapture: true,
        longTapCapture: true,
        doubleTapCapture: true,
        simpleTapCapture: false,
        preventDefaultEvents: false 
    }
    );

}

Issue with a scrollable div on ipad

2 Answers2

Linked