overflow-x:hidden still can scroll

Question

The problem is:

I have a full width bar menu, which is made by creating a big margin on the right and to the left. This margin should be cropped by overflow-x:

Answer 1

From Weaver's Offcanvas demo http://jasonweaver.name/lab/offcanvas/

Wrap content with:

width: 100%; 
overflow: hidden;

This limits only the width and has worked in similar occasions also has prevented scrolling while dragging.

Answer 2

Try the fixed position html element, but this disable scroll both direction.

html {
    position: fixed;
}

Answer 3

html, body { overflow-x: hidden; width: 100%; }

Solved the issue for me, except for IE - you can still drag the site to the right if you make an effort to do so.

Using overflow: hidden; removes the vertical scrollbar, so this isn't a solution.

I couldn't manage to find a better solution using JavaScript.

Answer 4

How about setting the width on the content body, and warping the #container around the #menu_bar and #content_body?

body
    div#container 
       div#menu_bar (absolute positioned)
          div#links
          div#full_bar
       div#content_body (relative positioned + padding [#menu_bar height])
          ...

CSS example.

Answer 5

Consider using max-width for html.

keep me posted if it's not working.

Answer 6

I don't think there's any way to prevent scrolling of an element without using JavaScript. With JS, though, it's pretty easy to set scrollLeft to 0 onscroll.