In Safari on iPad is there a way to stop the page rubber banding BUT still allow overflows too scroll?

Question

There's a lot of snippets to stop the rubber-banding on iPad, like the one below:

document.body.addEventListener('touchmove',function(event){ event.preventDefault(); },false);

However this has the unwanted effect of preventing all divs with overflows on them from scrolling too?

Is there a way to just top the page (body) from rubber-banding while still allowing the overflowed-scrolled divs to do so?

Answer 1

The rubber-banding of the entire page seems to happen when the user is scrolling from the very bottom or very top of a div. The code I've written checks to see if the user is indeed at one of those extremes and if so prevents the scrolling action from happening in those directions.

elem.bind("touchstart", function( e )
{
    xStart = e.originalEvent.changedTouches[0].screenX;
    yStart = e.originalEvent.changedTouches[0].screenY;
});

elem.bind("touchmove", function( e )
{
    var xMovement = e.originalEvent.changedTouches[0].screenX - xStart;
    var yMovement = e.originalEvent.changedTouches[0].screenY - yStart;

    if( elem.scrollTop() == (elem[0].scrollHeight - elem[0].clientHeight) && yMovement < 0 )
    {
        e.preventDefault();
    }
    else if( elem.scrollTop() == 0 && yMovement > 0 )
    {
        e.preventDefault();
    }
    e.stopPropagation();
});

Update: including the working jsfiddle demo link: http://jsfiddle.net/qQHrM/1/