Helping you build a better website
(and other interesting web stuff)

CSSHTMLjQueryWordPress
Silva Web Designs - Blog

Detectar scroll para cima e para baixo com jQuery

Neste tutorial, vou mostrar como detectar se o utilizador está a fazer scroll para cima ou para baixo, utilizando jQuery, o que permite levar a cabo acções baseadas na direcção do scroll.

Conseguimos fazer isto apenas com algumas linhas de jQuery:


 $(function(){
	 var lastScrollTop = 0, delta = 5;
	 $(window).scroll(function(){
		 var nowScrollTop = $(this).scrollTop();
		 if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
		 	if (nowScrollTop > lastScrollTop){
		 		// ACTION ON
		 		// SCROLLING DOWN 
		 	} else {
		 		// ACTION ON
		 		// SCROLLING UP 
			}
		 lastScrollTop = nowScrollTop;
		 }
	 });
 });

O código acima é baseado em três variáveis: lastScrollTop, nowScrollTop e delta.

  • lastScrollTop: Esta variável armazena a última posição Y da janela do website, e por última posição queremos dizer o número de pixels oculto da visualização acima da área de scroll. O valor inicial desta variável é definido por 0 quando a barra de scroll está no topo.
  • nowScrollTop: Esta variável armazena o número de pixels que estão escondidos acima da área de scroll no preciso momento em que o utilizador está a navegar na página.
  • delta: O delta é como um limite, é uma variação que necessita da detecção de scroll para ocorrer. Por exemplo: você pode não gostar de ter a função de detecção de scroll a correr quando o utilizar faz scroll acidentalmente, por exemplo, cerca de 4 px abaixo. Por isso definimos a variável delta a cerca de 5 px, o que vai evitar scrolls curtos ou acidentais que costumam acontecer em ecrãs touch.

Agora que sabemos o que significa cada variável, aqui está o código explicado linha a linha:

  • $(function(){…}) corre o código quando o documento está pronto.
  • var lastScrollTop = 0, delta = 5; define o valor de duas variáveis.
  • $(window).scroll(function(){…}) executa o código incluído na função quando o utilizador faz scroll na janela.
  • var nowScrollTop = $(this).scrollTop(); define o valor da terceira variável, que é igual ao valor de scroll que ocorreu.
  • if(Math.abs(lastScrollTop – nowScrollTop) >= delta){…} executa o código abaixo apenas se a diferença absoluta entre lastScrollTop e nowScrollTop é inferior ao delta (i.e. 5px). Estamos a falar de um valor positivo porque a distância entre valores de scroll é sempre positiva (é uma quantidade escalar).
  • if (nowScrollTop > lastScrollTop){…} se o valor de scroll no momento é superior ao último valor de scroll, então ocorreu um movimento para baixo, o que vai executar o código dentro desta função.
  • o mesmo quando ocorreu scroll para cima.
  • Finalmente definimos o valor lastScrollTop = nowScrollTop; porque agora o último valor de scroll torna-se o nowScrollTop value.

Espero ter ajudado!

Vanessa M - Profile

Posted by: Vanessa M

Vanessa Marcos is a writer and social media manager whose passion is copywriting and getting words together to create new stuff. #creativewriting #copywriting Love her writing? Find out more at Calma Copywriting.

It’s good to share

Join the discussion