Login/Register
Disable horizontal scrollbar due to a DIV with position:absolute which is outside of the page
Asked Answered
htmlcssxhtmlscrollbarcss-position
C

7

37

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>
Crystalcrystalline answered 24/5, 2011 at 14:15 Comment(4)
No. Not without hacky javascripts. – Tricksy
If you have found your answer, could you please mark it with a check? – Briefs
@Briefs Sorry... I was in the wrong thread... lol... had so many questions open that I thought this was mine! ( Yeah, I'm an idiot! :) ) – Naoma
Why not set the div to display:none? – Sanative
B
38

Yes, it is possible, on your html tag, type style="overflow-x: hidden". That'll do the trick...

Briefs answered 24/5, 2011 at 14:34 Comment(1)
Specifically said he does not want to turn off the scrolling, just doesn't want that particular element to trip the scrollbar. So unfortunately that doesn't really do the trick. – Unlive
P
25

This can in fact be done using straight CSS without having any restrictions on page width etc. It can be done by:

  1. Create a div with hidden overflow that is absolutely positioned at the top left corner of the page. Make it's width and height 100%
  2. Create another div that is the same, but without hidden overflow
  3. Add a class for divs that wrap around the content of the ones created, making its position relative and giving it whatever width you want the main page content to have
  4. Add content of that class in each of the divs you've created.

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.sstatic.net/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>
Plastered answered 19/4, 2012 at 15:54 Comment(1)
This is indeed working lovely, thanks for the solution. – Homoiousian
P
13

What you have to do is to add a wrapper outside of your divs.

Here is the CSS: I call my class 'main_body_container'

.main_body_container {
    min-width: 1005px; /* your desired width */
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

Hope it helps :)

Update

Created a Pen for it, see it here

Prefix answered 24/11, 2011 at 4:12 Comment(1)
such a simple solution. thnx! – Oriental
D
4

Not too sure if this would help but you can try changing the styling for the mentioned divs to this instead:

<div id="el1" style="position:fixed; left:-20px; top:0; background-color:yellow; z-index:-1">element</div>

<div id="el2" style="position:fixed; left:20px; top:0; background-color:yellow; z-index:-1">element</div>

By setting the position as fixed instead, it "locks" the specified divs in place while the rest of the content is still scrollable. Of course this is assuming that it is in the instance that the rest of the content is stacked by the z-index to be on top of the defined divs.

Hope this helps.

Dreadnought answered 12/6, 2011 at 18:37 Comment(0)
S
4

I was able to solve this problem by changing the element's position attribute to fixed:

position: fixed;

No more horizontal scrolling caused by this element but still horizontal scrolling caused by other elements.

Suddenly answered 22/4, 2015 at 10:53 Comment(0)
Z
3

Put the following style

html {overflow-x:hidden;}

I tested it on IE 8, FF and Chrome.

Zinnes answered 11/9, 2015 at 9:56 Comment(0)
D
2

Add this to your CSS:

div {
overflow-x:hidden;
overflow-y:hidden;
}

The overflow-x and -y styles are not recognized by IE. So if you're only concerned with Firefox 3, this will work fine. Otherwise, you can use some javascript:

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only
Detoxicate answered 12/6, 2011 at 19:3 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.