Prevent Body From Scrolling on Touch Devices using jQuery

April 10th, 2015 - Posted by Steve Marks to Javascript / jQuery, Web Development.

There are two scenarios I can think of when you might not want to the user to be able to scroll the window on handheld devices:

1. When a site is designed to fit within the boundaries of a viewport
or
2. When a fixed full screen menu or modal window has opened, in which case swiping up and down would cause the body content behind to continue to scroll.

Fortunately using jQuery we can prevent swiping by using something like so:

$('body').bind('touchmove', function(e){e.preventDefault()});

And to re-allow swiping again (i.e. when a menu or full screen modal is closed):

$('body').unbind('touchmove');
This entry was posted on Friday, April 10th, 2015 at 1:42 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first