如何检测滚动条的位置？

Question

我在网页上有一个带有overflow:visible和direction:rtl的 div。

问题是IE将滚动条显示在左侧，而Chrome和FF则将其显示在右侧。

是否有JS方法可以检测滚动条的位置？

我知道你可以通过判断浏览器类型来确定滚动条位置，但我不满意这个解决方案。

- IgalSt

---

滚动条的位置似乎是由浏览器自行决定的，可能无法通过JS进行读取/设置。但也许有一些（专有的？）CSS属性可以强制它在左侧或右侧？不过我不确定。 - Flambino

你可以像 @cmdecho 所示的那样“黑客”它。但我不喜欢这种方式。我更喜欢以某种方式检测它。 - IgalSt

有绕过的方法，是的，但我的意思是，由于似乎无法直接设置scroll-bar:left/right属性或类似的东西，而且它只是其他设置的副作用，我怀疑没有办法读取其位置。它只是不可见的属性（这是我的猜测）。 - Flambino

https://dev59.com/U3RB5IYBdhLWcg3wiHpl#13336185 - Travis J

Answer 1

这里有一个非常hacky的想法:

获取div内第一个子元素的相对x偏移量(或者简单地从子元素的x位置中减去div的x位置)

如果滚动条在左侧，第一个子元素的x偏移量/位置应该比滚动条在右侧时更高，因为左侧滚动条会将元素向右推一点。

也许它会起作用(我手头没有IE来检查)

这是一个未经测试的jsfiddle概念：http://jsfiddle.net/tKGS2/

- Flambino

---

不错的想法。我想我会尝试一下。谢谢。 - IgalSt

谢谢。我在那里进行了一些小的修正，现在这个功能可以正常运行了（请注意，它只在IE中可见）。http://jsfiddle.net/tKGS2/1/ - IgalSt

@IgalSt 注意，如果您将缩放比例调整到最大，您可以获得.left小于5的值，因为滚动条的宽度会变小。 - Omu

Answer 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>

- Vasil Nikolov

---

我更喜欢不添加额外的DOM来强制指定一个特定的方向。 - IgalSt

Answer 3

我做了这样一个功能，让你可以在不必拥有可见的div的情况下，通过javascript获取滚动条的位置 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;

- Omu