Preventing vertical scrolling bounce of websites on iOS using JavaScript

May 23, 2012 | By

I recently created a web site for reading Twitter called http://lottatweets.com.   As mentioned in an earlier blog post, the site uses CSS3 columns and scrolls horizontally.  If you use your iPad and access any websites, you’ll notice that if you pull down on the content, you can drag the top of the page down an inch and then it will bounce back.  This is fine for websites, but for my site, the partial-vertical scrolling with bounce is annoying because the site has no content above or below what you see on the screen.

I did some research and found a few ways to disable scrolling altogether by intercepting the touchstart and/or touchmove events and calling preventDefault() on the event.   After some experimentation and studying the touch events documentation, I found a near-perfect solution.

In simple terms, when your finger touches the screen, it fires the touchstart event.  I then capture the X/Y coordinates. As soon as your finger moves across the screen, it fires the touchmove event where I capture the new X/Y coordinates. I then check to see which way you are trying to move the page by comparing the movement along the X and Y axis.  If it’s vertical (change in Y > change in X), I call preventDefault(), which prevents the scroll.

Here’s the code:

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

Tweaks — I found that simply checking for change in Y > change in X wasn’t enough because I could drag diagonally at a near-45 degree angle and it would still tug my title bar down.  I wanted it to be more of a 20 degree check, so I added a multiplier of 3 on the y-axis movement (I don’t remember enough trig to know that 3  was the right multiplier to use — it was a bit of trial and error).

The results are good.  Grab your iPad and go to http://lottatweets.com, login, and once the tweets are displayed, try to scroll vertically.  The title bar and footer are locked in place nicely.  If you try hard enough, you can find an angle that will allow you to drag diagonally, but it’s good enough!

NOTE:  If you’re building an app with PhoneGap, there is a better solution that I blogged about earlier.  The above solution is for web apps accessed via iOS Safari.

Filed in: HTML5, iOS/iPhone/iPad, JavaScript, LottaTweets | Tags: , , , , , , ,

About the Author (Author Profile)

Greg is a developer advocate for the Google Cloud Platform based in San Francisco, California
  • http://na Christian

    Worked great!

    Thanks for posting this solution!

  • b.kurniawan

    it works!

  • b.kurniawan

    Thanks a lots..^^

  • r.scholz

    it works but the content use always the preventDefault event