5

I have a div with position: absolute set and it's just a tad bit wider than my browser window. I've successfully hidden the horizontal scroll bar, but I am still able to scroll over with a Macbook trackpad.

Is there any way to circumvent this?

<div id="container">
    <div id="big-image"></div>
</div><!-- #container -->

#container {
    overflow-x: hidden;
}

#big-image {
    background: transparent url('/path/to/image.png') no-repeat center top;
    position: absolute;
    width: 1307px;
    left: 50%;
    margin: 0 0 0 -653.5px;
    z-index: 4;
}
Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Yes Barry
  • 9,514
  • 5
  • 50
  • 69

2 Answers2

7

If you're not limiting the height of #container, just set overflow to hidden, as overflow-x is strange in that it removes the scroll bar, yet still allows you to scroll.

Example

body {
    overflow-x: hidden;
}

#container {
    overflow: hidden;
    width: 100%;
}
Randy the Dev
  • 25,810
  • 6
  • 43
  • 54
  • This worked, but there is a slight issue when the window is small enough to where the _content area_ causes the horizontal scrollbar to appear. That is, you can scroll over but the image I was using is cut off and it's just white where the image should go.. Still though, thanks! For now, I've worked around it with JS but can it be done with pure CSS? – Yes Barry Apr 13 '12 at 22:50
  • I'm not sure what you're referring to by content area :S Perhaps set the overflow property of it to hidden as well? – Randy the Dev Apr 13 '12 at 22:55
  • I just realized I never responded to your question. I don't remember what I was working on at the time but I think I can explain. Technically I never figured this out completely and I still have my JS workaround in place lol. – Yes Barry Sep 11 '12 at 07:48
  • 1
    This solved my problem, thanks! I needed to put overflow-x:hidden on both the html element, and the body element, to stop the side scrolling being allowed. – zenkaty Oct 10 '12 at 04:59
1

You could probably use position: fixed; on the #big-image.

Jonas Äppelgran
  • 2,617
  • 26
  • 30