3

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.

psergiocf
  • 1,493
  • 2
  • 20
  • 27
  • Sounds like you have some poor css markup causing the scroll (something always pushing the container) - as for your question, you could always either .css( 'overflow', 'hidden' ) or add a class that has that rule in it to the element – Dan Heberden Dec 06 '11 at 17:07
  • is there content under the vertical scroll? If that's the bottom of the page you should be fine. Do you have a footer? – Phill Pafford Dec 06 '11 at 17:07
  • Right now I don't have content under the menu. The menu has a position: absolute and it's dynamic height is being set by setting top: 202px and bottom: 3px, with overflow-y: auto so that the vertical scroll appears when its supposed to. This menu doesn't have the anatomy of the jQuery mobile because it is not inside a data-role="page" because it appears on all pages. I've also done a test to put a div inside the data-role="content" with a vertical-scroll and the problem persists. – psergiocf Dec 06 '11 at 17:42
  • You might want to look at http://stackoverflow.com/q/7600454/925897 – brentonstrine Aug 22 '13 at 23:01

2 Answers2

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.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • 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. – psergiocf Dec 06 '11 at 18:25
  • @Sérgio http://jsfiddle.net/Wg8pk/1/ I tested on my Android device and when I try to scroll on the `#mainNavigation` element it doesn't work. – Jasper Dec 06 '11 at 18:32
  • @Jasper the aim isn't to block #mainNavigation but prevent page scrolling when the scroll of #mainNavigation reaches the end. – Diogo Cardoso Dec 06 '11 at 22:53
0

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

Luke
  • 8,235
  • 3
  • 22
  • 36