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.
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!