Я ищу кросс-браузерное решение, чтобы получить точное левое / правое положение элемента в окне просмотра независимо от полосы прокрутки .
Все решения, которые я нашел в Интернете, даютрешения, в которых смещение отсчитывается от правого / левого края полосы прокрутки (если есть), а не от края области просмотра. Я хочу получить смещение влево / вправо от края области просмотра браузера .
Если полоса прокрутки отсутствует, проблем нет.Я могу получить правую / левую позицию из окна просмотра.
Если есть полоса прокрутки, например, слева от тега html, если element с плавающей точкой слева, она будет иметь смещениеleft в 0, но я хочу смещение влево на ширине полосы прокрутки (IE 16px, Chrome 17px ...), которое является реальным смещением от левого края области просмотра.
Как мы видим на этих рисунках, левые смещения равны 0 (но должны быть на ширине полосы прокрутки, здесь наIE в 16px) и для правильных смещений у нас нет никакого способа вычислить их.Действительно, когда элемент смещается вправо, он всегда будет со смещением влево на размер innerWidth окна или на размер body.clientWidth (+ element.clientWidth) независимо от того, находится ли полоса прокрутки слеваили справа ...
Хорошим решением могло бы стать использование clientLeft, но оно не совместимо с Safari, Edge и IE.
Другим возможным решением могло бы стать использованиеgetBoundingClientRect().x но совместимость очень ограничена.К сожалению, эта таблица в основном неверна для свойств x / y.Точная совместимость:
- IE => не работает
- Safari => v11 или более
- Opera => v48 или более
- Chrome=> v61 или более
- Firefox => v52 или более
- Edge => не работает
Примечание: Чтобы проверить и сделать полосу прокрутки / элемент слева/ право вы можете использовать этот фрагмент:
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
overflow-y: auto;
}
p {
width: 300px;
margin: 0 auto;
font-size: 2em;
text-align: justify;
}
#sc {
position: relative;
float: right;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="sc"></div>
<button id="toggle_scrollbar">toggle rtl / ltr</button>
<button id="toggle_sc">toggle sc element</button>
<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. 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 body = document.getElementsByTagName('body')[0];
var sc = document.getElementById('sc');
sc.style.float = 'right';
var toggle_scrollbar = document.getElementById('toggle_scrollbar');
toggle_scrollbar.addEventListener('click', function (e) {
html.setAttribute('dir', (html.getAttribute('dir') === 'rtl') ? 'ltr' : 'rtl');
display();
});
var toggle_sc = document.getElementById('toggle_sc');
toggle_sc.addEventListener('click', function (e) {
sc.style.float = (sc.style.float === 'right') ? 'left' : 'right';
display();
});
function display () {
console.log('window.pageXOffset ---> ', window.pageXOffset);
console.log('window.scrollX ---> ', window.scrollX);
console.log('window.innerWidth ---> ', window.innerWidth);
console.log('window.outerWidth ---> ', window.outerWidth);
console.log('element.offsetLeft ---> ', sc.offsetLeft);
console.log('element.scrollLeft ---> ', sc.scrollLeft);
console.log('element.clientLeft ---> ', sc.clientLeft);
console.log('element.clientWidth ---> ', sc.clientWidth);
console.log('element.getBoundingClientRect().left ---> ', sc.getBoundingClientRect().left);
console.log('element.getBoundingClientRect().x ---> ', sc.getBoundingClientRect().x);
console.log('body.offsetLeft ---> ', body.offsetLeft);
console.log('body.scrollLeft ---> ', body.offsetLeft);
console.log('body.clientLeft ---> ', body.clientLeft);
console.log('body.clientWidth ---> ', body.clientWidth);
console.log('body.getBoundingClientRect().left ---> ', body.getBoundingClientRect().left);
console.log('body.getBoundingClientRect().x ---> ', body.getBoundingClientRect().x);
console.log('document.documentElement.offsetLeft ---> ', document.documentElement.offsetLeft);
console.log('document.documentElement.scrollLeft ---> ', document.documentElement.scrollLeft);
console.log('document.documentElement.clientLeft ---> ', document.documentElement.clientLeft);
console.log('document.documentElement.clientWidth ---> ', document.documentElement.clientWidth);
console.log('html.offsetLeft ---> ', html.offsetLeft);
console.log('html.scrollLeft ---> ', html.offsetLeft);
console.log('html.clientLeft ---> ', html.clientLeft);
console.log('html.clientWidth ---> ', html.clientWidth);
console.log('html.getBoundingClientRect().left ---> ', html.getBoundingClientRect().left);
console.log('html.getBoundingClientRect().x ---> ', html.getBoundingClientRect().x);
}
</script>
</body>
</html>
(Я изменил полосу прокрутки на теге body, чтобы она работала в chrome / Firefox, но я ищу решение, когда прокрутка на htmlтег тоже)
У кого-нибудь есть идеи, чтобы найти кросс-браузерное решение?Заранее спасибо.