Is it possible to prevent just horizontal scrolling when overflow-x is hidden?

javascript css overflow hidden

10,181

Solution 1

you could try to set in CSS:

html{
  overflow-x: hidden;
}

instead of use body selector. I tried that and works in firefox.

Solution 2

I think the real question is, why do you have your content overflowing out of the intended size of the page? Is this content that you don't want users to actually see? In that case, put it in a div somewhere and set it's display to none. That would avoid the overflow issue entirely.

If there is a legit reason you want it to overflow the container, then set the size of the container explicitly, then the overflow-x to hidden. I haven't tested it, but that should prevent the current behavior. If not, try using a div, rather than the body tag. The browsers may be acting strangely because it's working on the body tag itself.

Solution 3

I would go into Chrome and open the developer tools on a desktop. Remove the overflow-x property. Then proceed to delete each parent element on your page. When you see that the horizontal scroll bar disappears, you know you have found your problem. Then dive into that element. My bet is you have a width of 100% and than a margin put onto it. Remove the margin if that is the case.

Solution 4

If all else fails, you could use Javascript to constantly force the browser to scroll to the left using window.scrollTo(xpos, ypos). For xpos you'll want to use 0 and ypos you'll want to get the user's current scroll position assuming you want to allow vertical scrolling.

You could put your function call either in the window.onscroll event handler, or in a javascript interval that runs every 100 ms or so. Up to you. If you need code examples just ask.

View more solutions

10,181

Andrew LeClair

Updated on April 19, 2022

Comments

Andrew LeClair about 2 years

I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.

Is there any way to prevent the browser from scrolling horizontally?

As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.
Automatico almost 12 years

I also tried this in FF, and it appears to have the exact same issue. The better solution would be, as @Chaulky noted, to simply set the display to "none". If you want this to appear, do some js / jquery to move it in again.
Seagrass almost 11 years

To prevent scrolling, one could use a combination of overflow: hidden, window.onscroll, and window.scrollTo in order to hide the scrollbars, and direct the user to 0,0 (the top-left of the screen) on scroll, effectively keeping the webpage in its current position (or ypos as the user's current scroll position to retain vertical scrolling as @InvisibleBacon suggested)