如何检测浏览器的哪一侧是滚动条-右侧还是左侧(对于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)会自动将滚动条移至左侧，这是正确的行为:
不幸的是，主要的浏览器(Chrome和Firefox)的行为方式不同，滚动条仍位于浏览器的右侧.
是否可以通过编程方式(最好是Vanilla JS)检测滚动条在哪一侧?
UPD(28.09.2018):到目前为止，答案中没有有效的解决方案，人们正在尝试使用 getBoundingClientRect().left 或 .offsetLeft ，并且将不会起作用，因为至少在Edge中，它始终独立于滚动条位置而始终为 0 .
UPD(15.10.2018):TLDR:没有办法.
似乎浏览器不提供用于检测滚动条一侧的API.在下面的答案中，有一些技巧，可以插入一个虚拟 div 并计算该div中的滚动条在哪里.我不能将这些技巧当作答案，因为文档滚动条可以通过多种方式定位(< html dir ="rtl"> ，操作系统的RTL版本，浏览器设置等)
如图所示此处，滚动条不会在 html 或上使用 HTML标签苹果浏览器.它适用于IE&边缘.我尝试过(在Edge 17，IE 11，Firefox 62，Chrome 69，Opera 56，Safari 5.1上运行)，它在2018年10月仍然有用(如果 dir =" rtl"Firefox，Chrome，Opera&中的> body dir ="rtl"，则Safari> 9.1在左侧显示滚动条).
到目前为止，我没有找到任何跨浏览器本机解决方案，可以按照您的要求找到滚动条的位置.我不认为你有一个.我们只能尝试找到"hack"来解决它...
根据您的问题/评论和您的真实问题，这里，我认为最好将重点放在 dir ="rtl" 的兼容性上.您正在尝试找出滚动条的位置，因为滚动条起初并未按预期工作.为了使它按预期工作，一个快速的解决方法是将滚动条放在 body 元素上:
<！DOCTYPE html>< html dir ="rtl">< head>< meta charset ="utf-8">< title></title>< style>html，正文{高度:100％;溢出:隐藏；}身体 {填充:0;边距:0;溢出-y:自动;/*或溢出:自动；*/}p {边距:0;字号:8em；}</style></head><身体>< orem ipsum dolor amet，安全地服从精英，sius do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.尽量不要抽烟，不要因抽烟而锻炼.Duis aute irure革命性的假想中的多洛尔(Dolor in reprehenderit).
p
p p p p p 和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</body></html> 此CSS代码将使 body 元素而不是 html 元素滚动.遗憾的是，将滚动条放在 body 上将在正确的位置显示滚动条.它适用于最新版本的浏览器.
确切的兼容性是(经过测试的最旧的工作版本):
- IE => v6-2001
- Edge =>全部
- Firefox => v4-2011
- Opera => v10-2009
- Chrome => v19-2012
- Safari => v10.1-2016
使用兼容的浏览器，您可以根据 dir 属性信任"滚动条的位置.这意味着对于上面列出的浏览器，滚动条将在 dir ="rtl" 的左侧，在 dir ="ltr" 的右侧.我进行了测试，并且可以正常工作.
对于较旧的浏览器版本，我暂时没有修复.这意味着您将无法完全兼容，但是如您所见，这主要是野生动物园的问题.
研究找到滚动条的位置
如上所述，我认为我们可以尝试查找"hack"以查找滚动条的位置.我不是CSS专家，所以我的解决方案不是很好.拥有CSS技能的人可能会找到一个好的解决方案.
如果滚动条位于主体上(上述解决方案)，我们可以使用css position元素检测滚动条的位置.例如此代码:
<！DOCTYPE html>< html dir ="rtl">< head>< meta charset ="utf-8">< title></title>< style>html，正文{高度:100％;溢出:隐藏；}身体 {填充:0;边距:0;溢出-y:自动;}p {边距:0;字号:8em；}#sc {位置:相对；向左飘浮;}#sc_2 {位置:相对；浮动:正确；}#sc_3 {位置:绝对；宽度:100％;}</style></head><身体>< div id ="sc"></div>< div id ="sc_2"></div>< div id ="sc_3"></div>< p> Lorem ipsum dolor坐在amet，私服adidasicing精英，sed do eiusmod临时劳动者和劳动者联合会.Ut enim ad minim veniam，quis nostrud exercitation ullamco labouris ni ut aliquip ex ea commodo结果.Duis aute irure dolor in reprehenderit in voltate velit esse西拉姆·杜洛尔·欧·富贾特圣人occaecat cupidatat非一个偶然的事件发生在犯罪现场，这是动手动手做的.< 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');如果(sc_2.offsetLeft< html.clientWidth&！(sc_3.offsetLeft< 0)){console.log('右边的栏');}否则，如果(sc.offsetLeft> 0 || sc_3.offsetLeft< 0){console.log('左侧的栏');} 别的 {console.log('no bar');}</script></body></html> 兼容性是(经过测试的最旧的工作版本):
- IE => v6-2001
- Edge =>全部
- Firefox => v4-2011
- Opera => v10-2009
- Chrome => v15-2011
- Safari => 不起作用
如果滚动条位于 body 标记上，则此解决方案不是很有用，因为如上所述，在这种情况下，我们可以信任" dir 属性.我把它放在这里是因为它可以可能适应 html 标记上的滚动.
For <html dir="rtl"> some browsers (Safari, Edge, IE) will automatically move the scrollbar to the left side which is the correct behavior:
Unfortunately, major browsers (Chrome and Firefox) are behaving in a different way, the scrollbar is still on the right side of the browser.
Is it possible to detect programmatically (preferably with vanilla JS) on which side is scrollbar?
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: there's no way.
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.)
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").
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...
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>
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
- Edge => all
- Firefox => v4 - 2011
- Opera => v10 - 2009
- Chrome => v19 - 2012
- Safari => v10.1 - 2016
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.
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 : Research to find the position of the scrollbar
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.
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
- Edge => all
- Firefox => v4 - 2011
- Opera => v10 - 2009
- Chrome => v15 - 2011
- Safari => not working
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屋！
