Body: overflow-x - you can still scroll the trackpad

Question

I have a div with position: absoluteset, and it is slightly wider than my browser window. I have successfully hidden the horizontal scrollbar, but I can still scroll the Macbook trackpad .

Is there any way around 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 don't limit the height of the # container, just set the overflow to hidden, because overflow-x is weird because it removes the scroll bar but still allows you to scroll.

Example

body {
    overflow-x: hidden;
}

#container {
    overflow: hidden;
    width: 100%;
}

Answer 2

You can probably use position: fixed;in #big-image.