Prevent scrolling a div with CSS?

Question

I'm looking at this demo page:

http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html

Which has this code behind it:

https://github.com/ymc-thzi/mobile-menu-hamburger

In general it works great but when the menu is open on my macbook I can use two fingers to scroll and move the white body div around. How could I prevent that using CSS?

Answer 1

If you always want to prevent scrolling, you could use something like:

div {
  overflow-x: hidden;
  overflow-y: hidden;
}

Just be aware that any content that extends past the edge of the div will be hidden :)

Otherwise, if you are just looking for a web mobile menu, check out jQuery mobile.

Answer 2

The scroll bars in the example URL are in the body, so you need to set the overflow property on the body to hidden when the menu is open and to auto when the menu is closed.

In the JavaScript file, you can add jQuery(document.body).css('overflow', 'hidden') in jQuery("#hamburger").click function and jQuery(document.body).css('overflow', 'auto') in the jQuery("#contentLayer").click function.