Disable Horizontal Scroll on Div

There is a cross browser dilemma especially now that safari uses an internal scroll mechanism that floats on top.

When a div with fixed height's content ends up getting larger than the div we need a scroll bar, but the scrollbar takes out some width and thus a horizontal bar is added to. How do we prevent a horizontal scroll even if the content is to wide I want no ability for the user to be able to scroll horizontally.

The CSS3 property ove开发者_如何学JAVArflow-x:hidden, still allows the user to scroll left and right with a trackpad. I want it disabled completely, or a solution that removes the problem of the vertical scroll bar taking width from the div.

Any ideas?

Marvellous

One solution is that you make the vertical scroll bar always display:

overflow-y: scroll

But still the scroll bar's width doesn't stay the same across browsers.

Or you can make a custom scroll bar replacement with div/CSS/JavaScript. Here is a jQuery plugin which seems promising:

http://jscrollpane.kelvinluck.com/

Set the image as background should fix your issues