Menu
I have an absolutely positioned element that is "outside" of the page, but I want browsers (I am using Firefox 3) not to display horizontal scrollbars. It seems that displaying a div that is positioned to the left (e.g. having "left: -20px") is okay, and no scrollbar is shown. However the same thing on the right ("right: -20px") always shows the scrollbar. Is it possible to hide the scrollbar, but to keep standard scrolling possible? I mean I only want to disable scrolling due to this absolute-positioned element, but to keep scrolling due to other elements (I know I can disable scrollbars completely, that's not what I want).
<!DOCTYPE html> <html> <body> <div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;"> element </div> <div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;"> element </div> <h1>Hello</h1> <p>world</p> </body> </html> 
265
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
You can also set the overflow-x CSS property to hidden, which prevents child content from wrapping within its container but turns off sideways scrolling. Another solution is to set the width of child elements to 100%.
Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
Yes, it is possible, on your html tag, type style="overflow-x: hidden". That'll do the trick...
83
This can in fact be done using straight CSS without having any restrictions on page width etc. It can be done by:
The content in your first div will stay properly aligned with the content of your second div, but any of its contents that go beyond the perimeter of the window will be truncated.
Here's a working example that keeps the image in a fixed position relative to the rest of the content, without using any JavaScript:
#widthfitter { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } #contentWrapper { width: 100%; position: absolute; text-align: center; top: 0; left: 0; } .content { width: 600px; position: relative; text-align: left; margin: auto; }<div id="widthfitter"> <div class="content"> <img src="https://i.stack.imgur.com/U5V5x.png" style="position:absolute; top: 240px; left: 360px" /> </div> </div> <div id="contentWrapper"> <div class="content"> Tested successfully on: <ul> <li>IE 8.0.6001.18702IS</li> <li>Google Chrome 17.0.963.46 beta</li> <li>Opera 10.10</li> <li>Konqueror 4.7.4</li> <li>Safari 5.1.5</li> <li>Firefox 10.0</li> </ul> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
