1

I have a problem with oveflow-x in my page. Althought the body has overflow-x hidden, I can still scroll on the page.

 <html>
    <body>
       <div id="content">
          <div id="mydiv"></div>
       <div>
    </body> 
 </html>

html and body have overflow-x:hidden. Div "content" has nothing in the css and div "myDiv" has position absolute. How can I make the "mydiv" not to go out of the page? Because now what happens is that I can still scroll on x.

Fiddle > http://jsfiddle.net/o7dph6sj

UID
  • 4,434
  • 11
  • 45
  • 75
novellino
  • 1,069
  • 4
  • 22
  • 51
  • 1
    Please show us an extract of css and html that is causing the problem, create a js fiddle because I can think of 10 things that can cause that kind of problem. What you have shown is not enough. – Bagzli Sep 05 '14 at 19:12
  • Add your CSS too! As you description doesn't make sense without full code. if possible share a Fiddle of your code. – UID Sep 05 '14 at 19:29
  • http://jsfiddle.net/o7dph6sj/ – novellino Sep 05 '14 at 19:57
  • On the fiddle it works. I have exactly the same code and in my webpage is not working. The problem is that the scrollbar is not visible in my case either. But if I scroll with the fingers on mousetrach on mac for example, then on Chrome I can see the scrolling. – novellino Sep 05 '14 at 19:58
  • @novellino: Chkout my answer and let me know if you are still getting the issue? – UID Sep 05 '14 at 20:06

4 Answers4

0

Without more code, the best answer I can think of is that your html and body tags do not have any kind of width set so they are inheriting the default width of 100%. Meaning that every child element is going to be inside of that 100%.

Set the body to have a set width and then set overflow to hidden, then check if the elements in your page are exceeding the width.

Example:

body{
  width: 1024px;
  overflow-x: hidden;
}

Also, the code that you set inside of #content could directly be affecting it as well, some elements will ignore its parents and be rendered outside of them which brings us back to... give us more code.

Bagzli
  • 6,254
  • 17
  • 80
  • 163
0

Because you're using a bad selector for overflow. If you want to avoid VERTICAL SCROLLING you use this:

html, body {
    overflow-y: hidden;
}

to avoid HORIZONTAL SCROLLING:

html, body {
    overflow-x: hidden;
}

to avoid BOTH

html, body {
    overflow: hidden;
}

take a look to your forked fiddle where I avoid BOTH overflow axises and there's no overflow at all

Devin
  • 7,690
  • 6
  • 39
  • 54
  • no I want the horizontal not to work. maybe on the fiddle you cannot use the scrolling with mouse so as to see the scrolling, but in my page it happens. – novellino Sep 05 '14 at 20:08
  • I gave you all 3 possibilities, just apply the one you want, the fiddle is just for reference, change the fiddle to X and you'll see if by yourself. There's no magic, it's simple basic CSS, so it works, bar none. Also, lose your !important declaration, if you do things right it's not needed and causes more problems than solutions – Devin Sep 05 '14 at 20:14
0

Change "overflow-x: hidden !important;" to be 

html, body {
    overflow: hidden !important;
}

or

html, body {
    overflow-y: hidden !important;
}

In-fact you can ignore "!important" since you use !important to override other rule. And here you were just using the wrong property "overflow-x" which is for "Horizontal scroll"

And it works!!!

Here is the working Fiddle > http://jsfiddle.net/o7dph6sj/1/

Updated the Answer with addition requirement:

You add "overflow: hidden" when you don't want both scrolls,

AND "overflow-y: hidden;" hides the Horizontal Scroll

AND "overflow-x: hidden;" hides the Vertical Scroll

Checkout the updated Fiddle and try on your by commenting and un-commenting this code:

html, body {
    overflow-y: hidden; /* Hides Horizontal Scroll*/
    /*overflow-x: hidden;*/ /* Hides Vertical Scroll*/
    /*overflow: hidden;*/ /* Hides Both Vertical and  Horizontal Scroll*/
}

Updated Fiddle "http://jsfiddle.net/o7dph6sj/3/"

Checkout these articles >

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

UID
  • 4,434
  • 11
  • 45
  • 75
  • yes it works. but I loos also the y scrolling which I want. And if I add overflow: hidden; overflow-y: auto; then I have the same problem – novellino Sep 05 '14 at 20:07
  • 1
    I found a solution. http://stackoverflow.com/questions/7511949/can-i-disable-a-horizontal-mouse-scroll-with-js This is the only one that makes it work. Thank you anyway – novellino Sep 05 '14 at 20:21
0

I tried for several hours and I found that the body size needs to be specified, and its attribute position must be set to absolute. Then you can have overflow-x: hidden work well in your code.

in this case, I have a web with a navbar that I want to slide right to hide from the main body in mobile size. I called @media screen and (max-width:576px) to make it run on mobile size. the problem occurred before I specify the max-width the body must be shown: I still can scroll to the right though I specified the overflow-x: hidden

so I added max-width:100vh inside the body style, and voila. it works!

checkout my code:

body{
    min-width: 0px;
    max-width: 100vh;
    position: absolute;
    overflow-x: hidden;
}

nav ul {
    position: absolute;
    right: 0;
    width: 40%;
    top: 34px;
    height: 100vh;
    z-index: 1;
    background-color: #194ca7;
}
Tio Multazem
  • 1