Resumo : neste tutorial, você aprenderá como obter ou definir a posição de rolagem de um elemento usando as propriedades Element.scrollTop
e Element.scrollLeft
.
Para obter ou definir a posição de rolagem de um elemento, siga estas etapas:
- Primeiro, selecione o elemento usando métodos de seleção como
querySelector()
. - Segundo, acesse a posição de rolagem do elemento por meio das propriedades
scrollLeft
escrollTop
.
Obtém Element.scrollTop
ou define o número de pixels em que o conteúdo de um elemento é rolado verticalmente.
Obtém Element.scrolLeft
ou define o número de pixels em que o conteúdo de um elemento é rolado a partir de sua borda esquerda.
Observe que o canto superior esquerdo do elemento é (0, 0)
. Os scrollLeft
e scrollTop
são relativos a essa coordenada.
O exemplo a seguir ilustra como obter a posição de rolagem do elemento com o id #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>
Linguagem de código: HTML, XML ( xml )
Anterior