WordPress / Web Development Tutorials
(Best WordPress Tutorials)

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

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

Join the discussion