I'm looking at this demo page:

.html

Which has this code behind it:

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?

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?

• javascript
• html
• css

• I suspect you'll need JS for that. BTW, have you tried to play with developer.mozilla.org/en-US/docs/Web/CSS/pointer-events – Roko C. Buljan Commented Apr 12, 2014 at 3:11
• @roko js is not needed, see my simple answer – Kevin Florida Commented Apr 12, 2014 at 3:13
• The usual overflow in CSS doesn't work. I'm not even sure if this counts as "scrolling" per say but when I use two fingers on my track pad I can move the white content div around the screen (when the menu is open). Do other people see this issue as well? – Aron Solberg Commented Apr 12, 2014 at 4:48

2 Answers 2

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.

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.