如何检测浏览器的哪一侧是滚动条 - 向右还是向左(如果是RTL)？
Lim*_*nte 26 javascript scrollbar arabic hebrew right-to-left
对于<html dir="rtl">某些浏览器(Safari,Edge,IE)会自动将滚动条移动到左侧,这是正确的行为:
不幸的是,主流浏览器(Chrome和Firefox)的行为方式不同,滚动条仍位于浏览器的右侧.
是否有可能以编程方式检测(最好使用vanilla JS)哪一侧是滚动条？
UPD(28.09.2018):到目前为止,答案中没有可行的解决方案,人们试图通过使用getBoundingClientRect().left或者检测滚动条位置.offsetLeft,这将无法工作,因为它始终0至少在Edge中独立于滚动条位置.
UPD(15.10.2018):TLDR:没办法.
似乎浏览器不提供用于检测滚动条侧的API.在下面的答案中,有插入假人的技巧div并计算该div中的滚动条的位置.我不能将这些技巧视为答案,因为文档滚动条可以通过多种方式定位(<html dir="rtl">RTL版本的操作系统,浏览器设置等)
它不是一个非常强大的解决方案，但可以用作创建更好的解决方案的基础。
基本逻辑是，当容器元素左侧有滚动条时，子元素向右移动。我们所要做的就是测量滚动条存在和不存在的变化。
这是一个简单的函数，基于jQuery它可以做到这一点。scrollElement是我们必须检测滚动条位置的元素。大多数情况下应该是html/body但不一定，我不知道有什么简单的方法可以找出这一点。
function isScrollLeft(scrollElement) {
var $scrollElement = $(scrollElement);
$scrollElement.append('<div id="scroll_rtl_tester" style="width=100%;height: 1px;"/>');
var $scrollTester = $('#scroll_rtl_tester');
var beforeLeftOffset = $scrollTester.offset().left;
var originalOverflow = $scrollElement.css('overflow-y');
$scrollElement.css('overflow-y', 'hidden');
var afterLeftOffset = $scrollTester.offset().left;
$scrollElement.css('overflow-y', originalOverflow);
$scrollTester.remove();
var isRtl = false;
if(beforeLeftOffset > afterLeftOffset) {
isRtl = true;
}
return isRtl;
}