Prevent Page Scrolling

Question

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.

Answer 1

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.

Answer 2

You need to make the menu have a fixed height and then using css to prevent overflow. user overflow:hidden; that should work