Como pegar a posição do scroll com JavaScript

Neste artigo você vai aprender a como pegar a posição do scroll com JavaScript, veremos isso através de uma abordagem simples!

Fala programador(a), beleza? Bora aprender mais sobre scroll e JavaScript!

Capturar a posição do scroll com JavaScript é uma tarefa bastante simples e pode ser feita usando as propriedades window.pageXOffset ou window.pageYOffset.

Essas propriedades são suportadas em todos os navegadores modernos e retornam a posição atual do scroll em pixels.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Para pegar a posição do scroll horizontal (esquerda/direita), você pode usar a seguinte linha de código:

const scrollX = window.pageXOffset;

E para pegar a posição do scroll vertical (cima/baixo), você pode usar a seguinte linha de código:

const scrollY = window.pageYOffset;

Além de pegar a posição do scroll, você também pode usar JavaScript para definir a posição do scroll.

Para fazer isso, você pode usar o método window.scrollTo(x, y), onde x é a posição horizontal desejada e y é a posição vertical desejada. Por exemplo, para rolar para a posição (0, 100) você pode usar:

window.scrollTo(0, 100);

É importante lembrar que o valor de x é a distância em pixels a partir do lado esquerdo da página e o valor de y é a distância em pixels a partir do topo da página.

Além disso, também é possível utilizar a propriedade scrollTop do objeto do documento para pegar a posição do scroll vertical, e scrollLeft para pegar a posição horizontal.

const verticalPosition = document.documentElement.scrollTop;
const horizontalPosition = document.documentElement.scrollLeft;

Usando esses métodos e propriedades, você pode criar uma variedade de efeitos interessantes e interativos na sua página, como rolagem suave, rolagem automática, botões de rolagem e muito mais.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Em resumo, capturar a posição do scroll com JavaScript é uma tarefa simples que pode ser feita usando as propriedades window.pageXOffset ou window.pageYOffset ou as propriedades scrollTop e scrollLeft do objeto do documento.

Essas propriedades retornam a posição atual do scroll em pixels e podem ser usadas para criar uma variedade de efeitos interessantes e interativos na sua página, como rolagem suave, rolagem automática, botões de rolagem e muito mais.

Além disso, você também pode usar o método window.scrollTo(x, y) para definir a posição do scroll, permitindo que você controle a rolagem da página com precisão.

Ao se familiarizar com essas técnicas, você poderá criar páginas web mais interativas e atraentes para os seus usuários.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!