Geek Answers Handbook

Is it possible to prevent horizontal scrolling while hiding overflow-x?

I have a webpage with content that goes through the right edge of the browser window. I set overflow-x: hidden to <body> to disable the lower scrollbar, but I can still scroll horizontally using the trackpad, which I don't want.

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

As a side note: Safari 4.0.4 sometimes scrolls horizontally, while scrolling seems to be sticky and nervous, while Firefox always scrolls horizontally smoothly.

+7
javascript css hidden overflow
source share
6 answers

I think the real question is why do you have content exceeding the page size? Is this content you don’t really want to see? In this case, put it in a div somewhere and set its value to none. This will completely eliminate the overflow problem.

If there is a legitimate reason why you want it to overflow the container, then explicitly set the size of the container, and then overflow-x to hidden. I have not tested it, but this should prevent the current behavior. If not, try using a div rather than a body tag. Browsers can act weirdly because they work on a body tag.

+3
source share

you can try installing in CSS:

 html{ overflow-x: hidden; }

instead of the body selector. I tried this and worked in firefox.

+2
source share

If all else fails, you can use Javascript to constantly force the browser to move left using window.scrollTo (xpos, ypos). For xpos, you want to use 0 and ypos, you want to get the user's current scroll position, provided that you want to enable vertical scrolling.

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

+1
source share

I would go into Chrome and open the developer tools on the desktop. Remove the overflow-x property. Then go on to delete each parent on your page. When you see that the horizontal scrollbar disappears, you know that you have found your problem. Then immerse yourself in this element. My bet is that you have a 100% width, not a margin. Remove margin if so.

+1
source share

That would be better understood if you had an example.

is it a long url or something without spaces? You have white-space:nowrap; mounted on an item?

If you have a container with a certain size (the one that fits in the viewport), the text should adhere correctly (if it's a long line without spaces)

0
source share

An old discussion, but it can come in handy for people who are looking for the right answer!

Set "overflow: hidden" in the parent div of the element, which is wider than the browser window (and not html or body, as you usually did), which will stop scrolling using the pad or arrow bar ...

0
source share

More articles:


All Articles