0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Для определения позиции элемента относительно viewport в JavaScript можно использовать методы getBoundingClientRect() и window объекта:</p>
1
<p>Для определения позиции элемента относительно viewport в JavaScript можно использовать методы getBoundingClientRect() и window объекта:</p>
2
// Получим DOM элемент, позицию которого мы хотим определить const element = document.getElementById('myElement'); // замените 'myElement' на id вашего элемента // Получим размеры и координаты элемента относительно viewport с помощью метода getBoundingClientRect() const elementPosition = element.getBoundingClientRect();<p>Метод getBoundingClientRect() возвращает объект с координатами элемента относительно viewport, включая top, right, bottom и left.</p>
2
// Получим DOM элемент, позицию которого мы хотим определить const element = document.getElementById('myElement'); // замените 'myElement' на id вашего элемента // Получим размеры и координаты элемента относительно viewport с помощью метода getBoundingClientRect() const elementPosition = element.getBoundingClientRect();<p>Метод getBoundingClientRect() возвращает объект с координатами элемента относительно viewport, включая top, right, bottom и left.</p>
3
<p>Теперь можем определить позицию элемента относительно viewport:</p>
3
<p>Теперь можем определить позицию элемента относительно viewport:</p>
4
const elementTop = elementPosition.top; // расстояние от верхней границы viewport до верхней границы элемента const elementLeft = elementPosition.left; // расстояние от левой границы viewport до левой границы элемента const elementBottom = elementPosition.bottom; // расстояние от верхней границы viewport до нижней границы элемента const elementRight = elementPosition.right; // расстояние от левой границы viewport до правой границы элемента<p>Также можно добавить проверку, чтобы узнать, виден ли элемент на экране:</p>
4
const elementTop = elementPosition.top; // расстояние от верхней границы viewport до верхней границы элемента const elementLeft = elementPosition.left; // расстояние от левой границы viewport до левой границы элемента const elementBottom = elementPosition.bottom; // расстояние от верхней границы viewport до нижней границы элемента const elementRight = elementPosition.right; // расстояние от левой границы viewport до правой границы элемента<p>Также можно добавить проверку, чтобы узнать, виден ли элемент на экране:</p>
5
const isVisible = elementTop < window.innerHeight && elementBottom >= 0 && elementLeft < window.innerWidth && elementRight >= 0;
5
const isVisible = elementTop < window.innerHeight && elementBottom >= 0 && elementLeft < window.innerWidth && elementRight >= 0;