0

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?

CafeHey
  • 5,699
  • 19
  • 82
  • 145

1 Answers1

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/

Chris B
  • 733
  • 3
  • 10
  • 1
    That's funny...works perfectly for me. Maybe I misunderstood your question. Here's a working fiddle demo. http://jsfiddle.net/qQHrM/1/ On my ipad I'm able to scroll the div, but if I reach one of the ends the page doesn't rubber band. – Chris B Sep 03 '13 at 16:01