Como sincronizar o rolamento de página no jQuery

Escrito por kevin lee | Traduzido por fernanda lemi
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como sincronizar o rolamento de página no jQuery
Um mouse pode mover dois elementos de uma vez quando eles estão sincronizados (Stockbyte/Stockbyte/Getty Images)

Muitos desenvolvedores utilizam jQuery, que permite colocar efeitos visuais interessantes nas páginas web. Ele também poderá ajudar a manter os elementos div sincronizados. Uma div HTML é um contêiner prático, que armazena outros objetos em uma página. Quando há dois desses elementos, é possível utilizar o jQuery para deslocar um deles (a div Filha) quando a barra de rolagem é movida na div Mãe. Isso poderá ser útil, por exemplo, ao exibir um texto em uma div e imagens em outra. Um usuário poderá simplesmente rolar o elemento que contém o texto, e aquele com as imagens rolará automaticamente.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o "Bloco de Notas" ou um editor de HTML. Abra um documento HTML e acrescente o seguinte código JavaScript à seção "head" do documento:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>

    Esse código adiciona a biblioteca jQuery à página web.

  2. 2

    Adicione o seguinte código à seção "script" do documento:

    var parentObject = "Minha_Div_Mae"; var childObject = "Minha_Div_Filha";

    $(document).ready(function() {

    var parent = "#" + parentObject; var child = "#" + childObject;

    $(parent).scroll(function () {

    $(child).scrollLeft($(parent).scrollLeft()); $(child).scrollTop($(parent).scrollTop());

    }); });

    Substitua "Minha_Div_Mae" (somente o texto entre as aspas) pelo nome da div que controlará a barra de rolagem de outra div, e "Minha_Div_Filha" pelo nome da div que será controlada pela div Mãe. As funções scrollLeft e scrollTop do jQuery farão com que a div Filha role quando a barra de rolagem da div Mãe se movimentar.

  3. 3

    Salve o documento e visualize-o em um navegador. Clique em uma das barras de rolagem da div Mãe e arraste-a. A barra da div Filha também se moverá.

Dicas & Advertências

  • Lembre-se de que a função “ready”, mostrada no código, ajusta o comportamento de rolagem cada vez que a página é carregada. Para desabilitar a rolagem automática, inclua o respectivo código dentro de um comentário.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível