Setting the correct orientation for scrollbars in right-to-left pages

StackOverflow https://stackoverflow.com/questions/1261869

Question

I'm working with right-to-left layouts at the moment (think Hebrew or Arabic). In RTL, the page is generally flipped horizontally. However, I can't figure out how to change the orientation of the scrollbars. I would assume that the scrollbars should appear on the left side of a scrollable element, not the right side like it does in an LTR layout.

Here is an example page where the scrollbar still appears on the right:

<html dir="rtl">
<body>
<div style="height: 100px; overflow: auto;">
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
</body>
</html>

Is the orientation of a scrollbar a browser locale setting, and thus is not something I should be concerned about, or is there a way to set the orientation of the scrollbar?

(I'm not interested in implementing my own JavaScript scrollbar; if it turns out this is just a limitation of browsers then I'd rather live with that than add complexity to the page.)

Was it helpful?

Solution

I don't think it's a good idea to do this, I'm an Arab myself and I find it really annoying when the scrollbars are on the left.

OTHER TIPS

Just do that to the body tag : 

<body dir="rtl">

and it will work fine for IE only.

Firefox, Safari and Chrome is another story, you need some Javascript to get it work.

There is no standard way to flip the side of the page scrollbars, because it is an UI element while you can control only the page content (HTML).

You can add the dir attribute to the body tag like so:

<body dir="rtl">

The catch is that the behaviour is erratic in different browsers. Most newer browser will flip the content from right to left as you'd expect, but only IE and Opera also move the scrollbar to the left side.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top