How to detect scroll bar's side?

Question

I have a div with overflow:visible and direction:rtl on a page. The problem is that IE shows the scroll bar on the left while Chrome and FF shows it on the right. Is there any js way to detect the side of the scroll bar?

I know that you could go with if IE it's on the left and all others it's on the right, but I'm not happy with this solution

Scrollbar placement seems to be something the browser decides by itself, and which you probably can't read/set yourself via JS. But maybe there's some (proprietary?) CSS property that'll force it to be on one side or the other? I don't know though — Flambino, Aug 03 '11 at 12:06
you can "hack" it as @cmdecho shows. But I don't like it. I prefer to detect it somehow. — IgalSt, Aug 03 '11 at 12:11
There are ways around it, yes, but what I meant was, that since it appears you can't directly set a `scroll-bar:left/right` property or something like that, and it only happens as a side-effect of other settings, I doubt there's a way to read its position. It's simply not an exposed property (is my guess). — Flambino, Aug 03 '11 at 14:20

Flambino · Accepted Answer · 2011-08-03T14:39:12.253

4

Here's a really hacky idea:

Get the relative x-offset of the first child element inside the div (or simply subtract the div's x-position from the child's x-position)

If the scrollbar is on the left, the first child's x-offset/-position should be higher than if the bar's on the right, since a left-hand scrollbar would push the element a bit to the right.

Maybe it'll work (I don't have IE handy to check it)

Here's an untested jsfiddle of the concept: http://jsfiddle.net/tKGS2/

edited Aug 03 '11 at 14:39

answered Aug 03 '11 at 14:24

Flambino

18,507
2
39
58

Nice idea. I think I will give it a try. Thansk – IgalSt Aug 03 '11 at 14:35
Thanks. I did little fix there and I this does get the job done (note that it's visible only with IE) http://jsfiddle.net/tKGS2/1/ – IgalSt Aug 04 '11 at 12:49
@IgalSt note if you zoom in to the max you can get .left smaller than 5, because the width of the scrollbar gets smaller – Omu May 04 '13 at 14:13

score 2 · Answer 2 · answered Aug 03 '11 at 12:05

2

<div style="overflow:auto; width:100px; height:100px">
    <div style="direction:rtl;">
        text text text text text text text text text text 
        text text text text text text text text text text 
        text text text text text text text text text text
    </div>
</div>

answered Aug 03 '11 at 12:05

Vasil Nikolov

1,112
10
17

I prefer not to add extra DOM for to force a particular side. – IgalSt Aug 03 '11 at 12:10

score 0 · Answer 3 · answered May 04 '13 at 15:11

I made it so you could get the scrollbar position from javascript without having to have visible div http://jsfiddle.net/tKGS2/27/

var d = $("<div></div>");
d.css("overflow-y","scroll");
d.append('<p/>');

$('#pivot').append(d);

var x = d.find('p').position().left
d.css('display','none');

document.body.innerHTML += x;
var pos = x < 3 ? "right" : "left";
document.body.innerHTML += pos;

How to detect scroll bar's side?

3 Answers3

Linked