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: 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

score 149 · Answer 1 · edited Oct 05 '21 at 08:23

149

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

html, body {
  margin: 0 auto;
  overflow-x: hidden;
}

html{
  padding: 0;
}

body {
  width: 950px;
}

.full {
  background: red;
  color: white;
  margin-right: -3000px !important;
  margin-left: -3000px !important;
  padding-right: 3000px !important;
  padding-left: 3000px !important;
}

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

edited Oct 05 '21 at 08:23

Pritesh

1,066
3
15
35

answered Oct 22 '12 at 20:47

igneosaur

3,268
3
29
44

6

You still have the ability to scroll over, however. Even if the scroll bar isn't present, users with a mouse that allows zooming/panning/scrolling can still move the body over and see the rest. – RCNeil Feb 22 '13 at 16:59
1

Yes I can still scroll too...the issue is happening and I am still trying to get rid of this specially for those in ipads – Riskbreaker Feb 28 '13 at 14:33
2

THANK YOU THIS WAS THE WAY HOW IT WORKED ;D – Georg Jan 12 '14 at 17:26
It works for Chrome on Android, but sadly not work for iOS Chrome & Safari. – whuhacker Jul 15 '14 at 10:10
Same problem for me. Works with regular mouse but trackpads and mobile devices ignore the 'disabled scroll'. – nclsvh Aug 02 '16 at 08:05
just `
` wrapped around the MathJax equation worked for me. – Euler_Salter Sep 16 '18 at 21:41

score 52 · Answer 2 · answered Dec 23 '14 at 01:22

52

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/

answered Dec 23 '14 at 01:22

DD.

1,045
9
8

3

Thanks. Just using `overflow:hidden` on `html` and `body` with width/height 100% didn't work without this extra line. Thanks! – Husky Feb 16 '16 at 16:17
1

I tested a lot of suggestions in similar stackoverflow questions, but this is the only one which seems to solve the issue in my case, so far. Any explanation would be interesting why this works. I found an explanation why the problem occurs here: https://stackoverflow.com/a/6433475/880188 – LarS Dec 14 '17 at 06:00
1

No, it finally didn't work. I ended up to do the math and made sure that div's aren't wider than allowed, css calc() helped me here a lot as it allows the mixture of relative widths (vw or %) and absolute widths (px). – LarS Dec 16 '17 at 12:01
This causes double scroll. Any other suggestions? – Ankit Patil Jan 16 '22 at 05:31

score 11 · Answer 3 · answered Apr 16 '14 at 00:27

11

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.

answered Apr 16 '14 at 00:27

Cayan

452
4
8

width:100% unnecessary – doğukan Sep 12 '19 at 08:21

score 8 · Answer 4 · edited May 23 '17 at 11:54

8

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>

edited May 23 '17 at 11:54

Community

1
1

answered Oct 08 '13 at 19:49

kernel

3,654
3
25
33

1

This prevents native over scroll bouncing – Ricky Boyce Jan 25 '19 at 05:01

score 6 · Accepted Answer · answered Dec 27 '11 at 01:27

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.

answered Dec 27 '11 at 01:27

powerbuoy

12,460
7
48
78

Can you make an instance of this so I know what you mean? – Riskbreaker Feb 28 '13 at 14:32
2

http://stackoverflow.com/questions/1386696/make-scrollleft-scrolltop-changes-not-trigger-scroll-event ...........this should be it – Riskbreaker Feb 28 '13 at 14:39
I'm using this for a game I'm building, but it does show some noticeable jerkiness. I'd love a solution that prevents IE from scrolling at all. In my scenario, I've got a fixed height of 1000px, and about 1100px of content inside of it. The bottom 100px is supposed to never be displayed. IE likes to scroll down and display this content :( – Gattster Dec 28 '14 at 23:34
Upon further research, I discovered -ms-scroll-limit: 0 0 0 0 (http://stackoverflow.com/questions/21975342/ie-overflow-hidden). This does the trick for me. – Gattster Dec 28 '14 at 23:38

score 3 · Answer 6 · answered Apr 30 '13 at 06:16

3

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.

answered Apr 30 '13 at 06:16

MTJ

1,059
1
10
23

If you middle click and drag this will not solve the issue... :( sadness. A JS solution is the only thing I've found to work. – dudewad Aug 28 '13 at 17:02

score 3 · Answer 7 · answered Aug 06 '13 at 09:26

3

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

html {
    position: fixed;
}

answered Aug 06 '13 at 09:26

user2656130

47
1

This solved my problem. I was using position: absolute for my app, but this was causing scrolling sideways go to the divs which were positioned beyond the viewport intentionally to not be seen. Setting position: fixed solved it. – Parth Jan 11 '16 at 06:08
Worked great for me – n0nag0n Jul 26 '17 at 23:30

score 1 · Answer 8 · answered Nov 27 '13 at 00:25

1

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

answered Nov 27 '13 at 00:25

D3XT3R

31
7

score 0 · Answer 9 · answered Dec 26 '11 at 13:30

0

Consider using max-width for html.

keep me posted if it's not working.

answered Dec 26 '11 at 13:30

Alireza

6,497
13
59
132

1

What do you mean by "using max-width for html"? That's a CSS property, not an HTML attribute. How would you use it? – BoltClock Dec 26 '11 at 16:17
I have a div with fixed width and inside that div an div that should have an full width – Nicos Karalis Dec 26 '11 at 21:21

Krazer · Answer 10 · 2011-12-29T17:43:42.587

0

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.

edited Dec 29 '11 at 17:43

answered Dec 26 '11 at 16:09

Krazer

471
7
20

You forget one thing, the outside div have fixed width witch make the whidth 100% useless – Nicos Karalis Dec 26 '11 at 21:20
Alright, can you elaborate on what you are trying to achieve? Why does the outside div need to be a fixed width? – Krazer Dec 26 '11 at 21:30
@NicosKaralis I made some edits. Let me know if this is along the lines of what you are looking for. – Krazer Dec 27 '11 at 01:32
Sorry, out of question... I'm using rails templates... The master temPlate has the #container and the menu_bar template has the #menu_bar, that's why i can't put it separately – Nicos Karalis Dec 27 '11 at 10:32
@NicosKaralis I made some slight modifications. Let me know if this is closer to what you are looking for. – Krazer Dec 29 '11 at 17:44
you are using menu_bar with fixed height... but not always it will have a fixed height – Nicos Karalis Dec 30 '11 at 11:30
@NicosKararlis that can always be changed or modified dynamically. you can use `min-height` too if you wanted. – Krazer Dec 30 '11 at 14:19

overflow-x:hidden still can scroll

CSS

@Krazer

10 Answers10

Linked