Как определить координаты элемента относительно всего документа и относительно видимой части окна в javascript? После события onscroll
координаты элемента относительно видимой части окна должны измениться. Заранее благодарен.
-
1. element.getBoundingClientRect 2. scrollTop– RubaXa30 авг 2013 в 5:18
-
Для случая получить абсолютные координаты вот– nick_n_a19 дек 2017 в 11:59
2 ответа
Координаты относительно видимой части документа — .getBoundingClientRect()
. Этот метод также возвращает ширину и высоту элемента.
document.querySelector('button').onclick = function() {
var c = this.getBoundingClientRect()
alert('top:' + c.top + ' left: ' + c.left +'');
}
button {
margin: 500px 0 0;
}
span {
display:block;
}
<div>
<span>scroll down</span>
<button>getBoundingClientRect()</button>
<div>
Координаты относительно начала документа — значение .scrollTop / .scrollLeft
+ .getBoundingClientRect().top / .getBoundingClientRect().left
document.querySelector('button').onclick = function() {
var c = this.getBoundingClientRect(),
scrolltop = document.body.scrollTop + c.top,
scrollleft = document.body.scrollLeft + c.left;
alert('top:' + scrolltop + ' left: ' + scrollleft + '');
}
button {
margin: 500px 0 0 500px;
}
span {
display: block;
}
<div>
<span>scroll down & left</span>
<button>getBoundingClientRect() + scrollTop</button>
</div>
Более подробно на learn.javascript.ru/coordinates
Координаты относительно всего документа с jQuery:
$('#element').offset();
Возвращает left и top относительно документа. Относительно прокрутки(скролла) - как уже писали, лидер по лаконичности getBoundingClientRect