Как показано здесь , полоса прокрутки не изменит сторону с dir="rtl" на html или body HTML-тегами в Firefox, Chrome, Opera и Safari,Работает на IE & Edge.Я пробовал (на Edge 17, IE 11, Firefox 62, Chrome 69, Opera 56, Safari 5.1), и это все еще актуально в октябре 2018 года (Safari> 9.1 отображает полосу прокрутки на левой стороне, если dir="rtl").
Я не нашел кросс-браузер нативное решение до сих пор, чтобы найти положение полосы прокрутки , как вы просили.Я не думаю, что у вас есть.Мы можем только попытаться найти "взломать", чтобы исправить это ...
На основании вашего вопроса / комментариев и вашей реальной проблемы здесь , я думаю, что было бы лучше сосредоточиться насовместимость 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
- Edge => all
- Firefox => v4 - 2011
- Opera => v10 - 2009
- Chrome => v19 - 2012
- Safari => v10.1 - 2016
Используя совместимые браузеры, вы можете «доверять» положению полосы прокрутки на основе атрибута dir.Это означает, что для перечисленных выше браузеров полоса прокрутки будет слева для dir="rtl" и справа для dir="ltr".Я протестировал, и это работает.
Для более старых версий браузеров, у меня пока нет исправлений.Это означает, что вы не будете полностью совместимы, но в основном это проблема с сафари, как вы можете видеть.
РЕДАКТИРОВАТЬ: Исследование, чтобы найти положение полосы прокрутки
Как я упоминал выше, я думаю, что мы можем попытаться найти «хак», чтобы найти положение полосы прокрутки.Я не эксперт по 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
- Edge => all
- Firefox => v4 - 2011
- Opera => v10 - 2009
- Chrome => v15 - 2011
- Safari => не работает
Это решение не очень полезно, если прокрутка находится на теге body, поскольку, как упоминалось выше, в этом случае мы можем "доверять" атрибуту dir.Я поставил его здесь, потому что , вероятно, можно адаптировать для прокрутки на теге html.