如何检测浏览器的哪一侧是滚动条 - 向右或向左(在 RTL 的情况下)? [英] How to detect on which side of the browser is scrollbar - right or left (in case of RTL)?
问题描述
对于 <html dir="rtl"> 一些浏览器(Safari、Edge、IE)会自动将滚动条移动到左侧，这是正确的行为:
For <html dir="rtl"> some browsers (Safari, Edge, IE) will automatically move the scrollbar to the left side which is the correct behavior:
遗憾的是，主要浏览器(Chrome 和 Firefox)的行为方式有所不同，滚动条仍位于浏览器的右侧.
Unfortunately, major browsers (Chrome and Firefox) are behaving in a different way, the scrollbar is still on the right side of the browser.
是否可以通过编程方式(最好使用 vanilla JS)检测滚动条位于哪一侧?
Is it possible to detect programmatically (preferably with vanilla JS) on which side is scrollbar?
UPD (28.09.2018):到目前为止，答案中没有有效的解决方案，人们试图通过使用 getBoundingClientRect().left 或 .offsetLeft<来检测滚动条的位置/code> 并且 不会 工作，因为它总是 0 至少在 Edge 中独立于滚动条位置.
UPD (28.09.2018): so far, there's no working solution in the answers, people are trying to detect the scrollbar position by using getBoundingClientRect().left or .offsetLeft and that will not work because it will always be 0 at least in Edge independently from the scrollbar position.
UPD (15.10.2018):TLDR:没办法.
UPD (15.10.2018): TLDR: there's no way.
似乎浏览器没有提供检测滚动条侧的API.在下面的答案中，有一些技巧可以插入一个虚拟的 div 并计算该 div 中滚动条的位置.我无法将这些技巧视为答案，因为文档滚动条可以通过多种方式定位(<html dir="rtl">、操作系统的 RTL 版本、浏览器设置等)
It seems that browsers do not provide API for detection the scrollbar side. In answers below there are tricks with insertion of a dummy div and calculating where is scrollbar in that div. I can not consider those tricks as an answer because the document scrollbar could be positioned with multiple ways (<html dir="rtl">, RTL version of OS, browser settings, etc.)
推荐答案
如图所示 here，滚动条不会改变边在 html 或 上使用 Firefox、Chrome、Opera 和 Opera 中的 HTML 标签苹果浏览器.它适用于 IE &边缘.我尝试过(在 Edge 17、IE 11、Firefox 62、Chrome 69、Opera 56、Safari 5.1 上)并且它在 2018 年 10 月仍然相关(如果 dir="rtl">bodydir="rtl"dir="rtl").
As it is shown here, the scrollbar won't change side with dir="rtl" on html or body HTML tag in Firefox, Chrome, Opera & Safari. It works on IE & Edge. I tried (on Edge 17, IE 11, Firefox 62, Chrome 69, Opera 56, Safari 5.1) and it is still relevant in october 2018 (Safari > 9.1 display scrollbar on left side if dir="rtl").
直到现在我没有找到任何跨浏览器本机解决方案来找到滚动条的位置，正如您所问的那样.我不认为你有一个.我们只能尝试找到hack"来修复它...
I didn't find any cross browser native solution until now to find the position of the scrollbar as you asked. I don't think you have one. We can only try to find "hack" to fix it...
根据您的问题/评论和您的实际问题这里，我认为最好关注dir="rtl"的兼容性.您试图找出滚动条的位置，因为它首先没有按预期工作.为了让它按预期工作，一个快速的解决方法是将滚动放在 body 元素上:
Based on your question / comments and on your real issue here, i think it would be better to focus on the compatibility of dir="rtl". You are trying to find out the position of the scrollbar because it was not working as expected in the first place. To make it work as expected, a quick fix could be to put the scroll on the body element :
<!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 上会在正确的位置显示滚动条.它适用于最新版本的浏览器.
This css code will make the body element to scroll instead of the html element. Strangly, put the scroll on body will display the scrollbar at the right place. It works for recent versions of browsers.
确切的兼容性是(测试过的最旧的工作版本):
The exact compatibility is (oldest working version tested) :
- IE => v6 - 2001
- 边缘 => 全部
- Firefox => v4 - 2011
- Opera => v10 - 2009
- Chrome => v19 - 2012
- Safari => v10.1 - 2016
使用兼容的浏览器，您可以根据 dir 属性信任"滚动条位置.这意味着对于上面列出的浏览器，滚动条将在 dir="rtl" 的左侧和 dir="ltr" 的右侧.我测试过，效果很好.
With the browsers which are compatible, you can "trust" the scrollbar position based on the dir attribute. It means that for browsers listed above, the scrollbar will be on the left for dir="rtl" and on the right for dir="ltr". I tested and it works.
对于较旧的浏览器版本，我暂时没有修复.这意味着你不会完全兼容，但正如你所见，这主要是 safari 的问题.
For older browsers versions, i don't have fix for the moment. It means that you won't be fully compatible, but it's mainly a problem with safari as you can see.
EDIT : 研究找到滚动条的位置
正如我上面提到的，我认为我们可以尝试找到一个hack"来找到滚动条的位置.我不是 css 专家，所以我的解决方案不是很漂亮.有 css 技能的人可能会找到一个好的解决方案.
As i mentionned above, i think we can try to find a "hack" to find the position of the scrollbar. I am not a css expert so my solution is not very pretty. Someone with css skills could probably find a good solution.
如果滚动在body上(上面的解决方案)，我们可以用css定位元素检测滚动条的位置.例如这个代码:
If the scroll is on the body (solution above), we can detect the scrollbar position with css positioned element. For example this code :
<!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>兼容性是(测试的最旧工作版本):
The compatibility is (oldest working version tested):
- IE => v6 - 2001
- 边缘 => 全部
- Firefox => v4 - 2011
- Opera => v10 - 2009
- Chrome => v15 - 2011
- Safari => 不工作
如果滚动位于 body 标记上，则此解决方案不是很有用，因为如上所述，在这种情况下，我们可以信任"dir 属性.我把它放在这里是因为它可以可能适应 html 标签上的滚动.
This solution is not very useful if the scroll is on the body tag because as mentionned above in this case we can "trust" the dir attribute. I put it here because it could probably be adapted for the scroll on the html tag.
这篇关于如何检测浏览器的哪一侧是滚动条 - 向右或向左(在 RTL 的情况下)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
