Obtenha e defina a posição de rolagem de um elemento

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 scrollLefte scrollTop.

Obtém Element.scrollTop ou define o número de pixels em que o conteúdo de um elemento é rolado verticalmente.

Obtém Element.scrolLeftou 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 scrollLefte scrollTopsã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 )

Alternar um elemento

Obtenha e defina a posição de rolagem do documento

Deixe um comentárioCancelar resposta