Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent Page Scrolling

I'm developing a mobile app with jQuery mobile and I have the following issue:

I have a menu which has a div inside with a vertical scroll. Once the scroll reaches the bottom of the container, it starts scrolling the page itself and this is not what I want. Is there a way to prevent the behavior? I mean, allow to scroll the menu's scroll until the bottom and when it happens, deny the page scroll when I'm scrolling on the menu?

Update:

Here's a raw example that has the same problem - http://jsfiddle.net/Wg8pk/.

If you scroll down the "Menu Options", it will scroll down the page when the menu reaches the end.

like image 437
psergiocf Avatar asked Mar 13 '26 13:03

psergiocf


1 Answers

How about calling event.preventDefault() on the element you are scrolling:

$('#my-scroll-div').bind('touchmove', function (event) {
    event.preventDefault();
});

I'm not sure which event would be better to bind to but touchmove seems like it would work. If you setup a jsfiddle of your code we can give better advice.

like image 70
Jasper Avatar answered Mar 15 '26 02:03

Jasper



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!