Question

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;
}

Answer 1

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%;
}