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.
you could try to set in CSS:
html{
overflow-x: hidden;
}
instead of use body selector.
I tried that and works in firefox.
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.
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.
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.
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 @Varicelloid suggested) –
Interceptor This would be better to understand if you had an example.
is this a long url or something with no whitespaces? Do you have white-space:nowrap; set on the element?
If you have a container with a defined size (one that fits in the viewport), the text should adhere correctly, (unless it's a long line with no spaces)
Old discussion, but it could be of use to people looking for the right answer !
Set "overflow:hidden" on the parent div of the element that is wider than the browser window (not html or body as you would normaly do), that will stop the scroll with de pad or the arrows pad...
© 2022 - 2024 — McMap. All rights reserved.