В этом руководстве вы узнаете, как получить или установить положение прокрутки элемента с помощью Element.scrollTop и Element.scrollLeft в JavaScript.
Чтобы получить или установить положение прокрутки элемента, выполните следующие действия:
- Сначала выберите элемент, используя методы выбора, такие как
querySelector(). - Во-вторых, произвести поиск позиции прокрутки элемента через
scrollLeftиscrollTop.
Element.scrollTop получает или задает количество пикселей, на которое содержимое элемента прокручивается по вертикали.
Element.scrolLeft получает или задает количество пикселей, на которое содержимое элемента прокручивается от его левого края.
Обратите внимание, что верхний левый угол элемента — это (0, 0). scrollLeft и scrollTop относятся к этой координате.
В следующем примере показано, как получить позицию прокрутки элемента с идентификатором #scrollDemo :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get/Set Scroll Position of an Element</title>
<style>
#scrollDemo {
height: 200px;
width: 200px;
overflow: auto;
background-color: #f0db4f
}
#scrollDemo p {
/* show the scrollbar */
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="scrollDemo">
<p>JavaScript scrollLeft / scrollTop</p>
</div>
<div class="output"></div>
<script>
const scrollDemo = document.querySelector("#scrollDemo");
const output = document.querySelector(".output");
scrollDemo.addEventListener("scroll", event => {
output.innerHTML = `scrollTop: ${scrollDemo.scrollTop} <br>
scrollLeft: ${scrollDemo.scrollLeft} `;
}, { passive: true });
</script>
</body>
</html>