Как показано здесь, полоса прокрутки победила не переходить на другую сторону с dir="rtl" в HTML-теге html или body в 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
- Край => все
- Firefox => v4 - 2011
- Опера => v10 - 2009
- Хром => v19 - 2012
- Сафари => v10.1 - 2016
В совместимых браузерах вы можете «доверять» положению полосы прокрутки на основе атрибута dir. Это означает, что для браузеров, перечисленных выше, полоса прокрутки будет слева для dir="rtl" и справа для dir="ltr". Я проверил, и это работает.
Для более старых версий браузеров у меня нет исправления на данный момент. Это означает, что вы не будете полностью совместимы, но, как видите, в основном это проблема с сафари.
РЕДАКТИРОВАТЬ: Найти положение полосы прокрутки
Как я упоминал выше, я думаю, что мы можем попытаться найти «хак», чтобы найти положение полосы прокрутки. Я не эксперт по css, поэтому мое решение не очень красивое. Кто-то с навыками css, вероятно, мог бы найти хорошее решение.
Если прокрутка находится на теле (решение выше), мы можем определить положение полосы прокрутки с помощью элемента css position. Например этот код:
<!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
- Край => все
- Firefox => v4 - 2011
- Опера => v10 - 2009
- Хром => v15 - 2011
- Safari => не работает
Это решение не очень полезно, если прокрутка находится на теге body, потому что, как упоминалось выше, в этом случае мы можем «доверять» атрибуту dir. Я поместил его здесь, потому что его можно вероятно адаптировать для прокрутки на теге html.
person
ElJackiste
schedule
11.10.2018
layout.scrollbar.sideна3вabout:config. - person Limon Monte schedule 21.09.2018*{direction: rtl}- person Observer schedule 21.09.2018{chrome: 'right', firefox: 'right', edge: 'left', safari: 'left', ie: 'left'}- person Gabriel C. Troia schedule 10.10.2018dirобязательно в тегеhtml, или в тегеbodyможет быть нормально, если он всегда размещает полосу прокрутки слева (в случае rtl)? - person ElJackiste schedule 11.10.2018