How to move a div's scrollbar to the left in safari/chrome?

Question

I have a div and the requirement on it is to move the scrollbar from the right side to the left side. I've accomplished this in FF and IE with a direction:rtl; css declaration. Safari and Chrome both seem to ignore this and still put the scrollbar on the right side. Is there a way to get it on the left side in both Safari and Chrome? Thanks!

(Also I cannot convince the people involved with this to have the scrollbar on the right side like it usually is, so I just need a solution to get it on the left.)

Answer 1

In lieu of a full-fledged JS plugin like jscrollpane, you could achieve the desired effect with a 'dummy' div and a few lines of JavaScript. This jsFiddle I whipped up shows the working effect:

http://jsfiddle.net/rtceC/

You may, however, want to add a few lines to register a scroll wheel event over the pseudo-scrolling content div and adjust scrollTop for the dummy (and thereby for the content itself) accordingly.