Issue with a scrollable div on ipad

问题

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.

回答1:

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.

回答2:

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 
    }
    );

}

来源：https://stackoverflow.com/questions/16437182/issue-with-a-scrollable-div-on-ipad

标签

html

css

ipad

scroll

overscroll