Guia jQuery

DevCast: Corringindo o bug do scroll no Firefox

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (13)  (0)

Neste DevCast vamos ver como corrigir um problema que ocorre no browser Mozilla Firefox ao realizarmos animações, com jQuery, que modificam a posição do scroll da página.

Recentemente descobrimos, com a colaboração de um de nossos assinantes, que o browser Mozilla Firefox possui uma pequena particularidade que impede a implementação de alguns efeitos na página que envolvam a posição do scroll. Para corrigir isso, foi preciso mudar a forma como realizamos a animação na página, fazendo isso também sobre o elemento html, ao invés de somente no body, como era feito para os demais browsers.

03:06 min

Consulta rápida

Para entender melhor, considere o trecho de código abaixo, que é o responsável por fazer a animação do scroll da página, rolando o conteúdo até a seção referente ao item de menu clicado:

01 var page = $('body');
02 $('a.tooltip').click(function() {
03 page.animate({
04 scrollTop: $( $.attr(this, 'href') ).offset().top
05 }, 1000);
06 return false;
07 });

Apesar de funcionar em outros browser, como Chrome e Edge, no Firefox esse código não funciona. Isso ocorre porque o Firefox gerencia o scroll da página com base no elemento html, ao invés de fazê-lo pelo elemento body, que foi o que selecionamos na linha 1 desse código. Então, para corrigir esse problema e fazer com que o código funcione em todos os navegadores, é necessário alterar essa linha da seguinte forma:

01 var page = $('html, body');

Sugestão de próximo conteúdo:

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?