如图所示here https://w3c.github.io/i18n-tests/results/native-user-interfaces, 滚动条不会改变方向 with dir="rtl" on html or bodyFirefox、Chrome、Opera 和 Safari 中的 HTML 标签。它适用于 IE 和 Edge。我尝试过（在 Edge 17、IE 11、Firefox 62、Chrome 69、Opera 56、Safari 5.1 上），它在 2018 年 10 月仍然相关（Safari > 9.1 在左侧显示滚动条，如果dir="rtl").
我没有找到跨浏览器本机解决方案到现在为止找到滚动条的位置正如你所问的。我认为你没有。我们只能尝试寻找“hack”来修复它......
根据您的问题/评论以及您的实际问题here https://github.com/sweetalert2/sweetalert2/issues/1221，我认为最好关注的是兼容性dir="rtl"。您试图找出滚动条的位置，因为它一开始就没有按预期工作。为了使其按预期工作，一个快速解决方法是将滚动条放在body元素 ：
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
overflow: hidden;
}
body {
padding: 0;
margin: 0;
overflow-y: auto; /* or overflow: auto; */
}
p {
margin: 0;
font-size: 8em;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
这段CSS代码将使body要滚动的元素而不是html元素。奇怪的是，把卷轴放上body将在正确的位置显示滚动条。它适用于最新版本的浏览器。
确切的兼容性是（测试的最旧的工作版本）：
- IE => v6 - 2001
- 边缘 => 全部
- 火狐 => v4 - 2011
- Opera => v10 - 2009
- Chrome => v19 - 2012
- Safari => v10.1 - 2016
使用兼容的浏览器，您可以根据以下内容“信任”滚动条位置dir属性。这意味着对于上面列出的浏览器，滚动条将位于左侧dir="rtl"并在右侧dir="ltr"。我测试过并且有效。
对于较旧的浏览器版本，我暂时没有修复。这意味着你不会完全兼容，但正如你所见，这主要是 safari 的问题。
EDIT : 研究找到滚动条的位置
正如我上面提到的，我认为我们可以尝试找到一个“黑客”来找到滚动条的位置。我不是 CSS 专家，所以我的解决方案不是很漂亮。具有 CSS 技能的人可能会找到一个很好的解决方案。
如果滚动条位于主体上（上面的解决方案），我们可以使用 css 定位元素检测滚动条位置。例如这段代码：
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body {
height: 100%;
overflow: hidden;
}
body {
padding: 0;
margin: 0;
overflow-y: auto;
}
p {
margin: 0;
font-size: 8em;
}
#sc { position: relative; float: left; }
#sc_2 { position: relative; float: right; }
#sc_3 { position: absolute; width: 100%; }
</style>
</head>
<body>
<div id="sc"></div>
<div id="sc_2"></div>
<div id="sc_3"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script>
var html = document.getElementsByTagName('html')[0];
var sc = document.getElementById('sc');
var sc_2 = document.getElementById('sc_2');
var sc_3 = document.getElementById('sc_3');
if (sc_2.offsetLeft < html.clientWidth && !(sc_3.offsetLeft < 0)) {
console.log('bar on the right');
} else if (sc.offsetLeft > 0 || sc_3.offsetLeft < 0) {
console.log('bar on the left');
} else {
console.log('no bar');
}
</script>
</body>
</html>
兼容性是（测试过的最旧的工作版本）：
- IE => v6 - 2001
- 边缘 => 全部
- 火狐 => v4 - 2011
- Opera => v10 - 2009
- Chrome => v15 - 2011
- 野生动物园 =>不工作
如果滚动条位于body标签，因为如上所述，在这种情况下我们可以“信任”dir属性。我把它放在这里是因为它可以probably适应滚动html tag.
