overflow-x:hidden still can scroll

问题

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: hidden, and it is... no scroll bars, everything (visually) is ok...

But, if you drag the page (using Mac Lion) or scroll to the right, the page shows an enormous bar, which should have been cropped by the overflow-x:hidden.

CSS

html {
  margin:0;
  padding:0;
  overflow-x:hidden;
}
body {
  margin: 0 auto;
  width: 950px;
}

.full, .f_right {
  margin-right: -3000px !important;
  padding-right: 3000px !important;
}

.full, .f_left {
  margin-left: -3000px !important;
  padding-left: 3000px !important;
}

Here is a link: http://jsfiddle.net/NicosKaralis/PcLed/1/

You have to open in draft to see... the jsfiddle css somehow makes it work.

@Krazer

i have and structure like this:

body
  div#container
    div#menu_bar
      div#links
      div#full_bar
    div#content_body
    ...

the #container is an centered div and has fixed width of 950px, the #full_bar is an bar that extends on the entire window, from one side to the other

if i put width 100% in #full_bar it will get only the inside width and not the width off the window

回答1:

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.

回答2:

I had this exact same problem. I solved it by putting overflow-x: hidden; on both the body and html.

html {
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
}
body {
  margin: 0 auto;
  overflow-x: hidden;
  width: 950px;
}
.full {
  background: red;
  color: white;
}
.full,
.f_right {
  margin-right: -3000px !important;
  padding-right: 3000px !important;
}
.full,
.f_left {
  margin-left: -3000px !important;
  padding-left: 3000px !important;
}

<div>
  <div class="full">
    abc
  </div>
</div>

回答3:

There is another way to fix this issue with one line of code:

body {
    /* All your regular code including overflow-x: hidden; */
    position:relative;
}

This solved my issues on webkit (Mac)

Reference: http://www.tonylea.com/2010/safari-overflow-hidden-problem/

回答4:

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.

回答5:

I found the solution here https://stackoverflow.com/a/9399429/622041

You'll have to put a #wrapper around your content. overflow:hidden on the body won't work.

#wrapper {position: absolute; width: 100%; overflow-x: hidden}

And here the HTML:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="wrapper">
      <div class="yourContent"> ... </div>
    </div>
  </body>
</html>

回答6:

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.

回答7:

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

html {
    position: fixed;
}

回答8:

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.

回答9:

Overflow on both the <body> and the <html> tags worked for me as well.

回答10:

Consider using max-width for html.

keep me posted if it's not working.

来源：https://stackoverflow.com/questions/8635799/overflow-xhidden-still-can-scroll

标签

html

css

overflow