JavaScript e as múltiplas rolagens

Escrito por kevin lee | Traduzido por victor almeida
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
JavaScript e as múltiplas rolagens
O JavaScript pode fazer barras de rolagem se moverem sem que o usuário tenha que rolar o mouse (Pixland/Pixland/Getty Images)

Você provavelmente verá as barras de rolagem em páginas da web muitas vezes, mas pode não vê-las em objetos que aparecem nessas páginas. É possível para os desenvolvedores acrescentar barras de rolagem para os elementos da página de internet. Elementos HTML div utilizados como recipientes, por exemplo, podem exibir barras de rolagem que você pode controlar através de um programa. Através da criação de uma função JavaScript simples que altera uma propriedade de HTML, é possível fazer várias divs rolarem ao mesmo tempo sempre que quiser.

Outras pessoas estão lendo

Recipientes

O exemplo a seguir mostra uma imagem e um botão colocado em uma página da web típica:

<img src="someImage.jpg" /> <input type="button" value="button" />

Coloque esses mesmos objetos dentro de uma div como mostrado abaixo, para tratá-los como um grupo.

<div id="divToScrollID" class="style1"> <img src="someImage.jpg" /> <input type="button" value="button" /> </div>

A div fechando os objetos consiste em uma tag de abertura <div> e uma tag de fechamento </ div>. Aplique um estilo CSS, como uma borda para o div, e a borda aparece em torno dos objetos. Para fazer com que todos os objetos desaparecem com o clique de um botão, basta chamar uma função que faz com que a div desapareça, definindo o atributo de exibição da div para "none".

Barras de rolagem

A div no exemplo anterior tem um atributo id que a identifica de forma única e um atributo de classe que aponta para uma classe de folha de estilo em cascata. Essa classe define as propriedades de exibição da div. Fazer uma div de rolagem atribuindo um valor de "auto" para seu atributo pode ser maléfico. Este valor faz com que as barras de rolagem apareçam se uma imagem ou qualquer outro objeto dentro de uma div não se encaixar dentro da div. Se você quiser que as barras de rolagem sempre apareçam, defina o valor para "scroll" em seu lugar.

Barra de rolagem dinâmica

Você pode ter uma div contendo conteúdos que necessitam de rolagem, sem intervenção do usuário. Um documento longo de acordo, por exemplo, pode estar dentro de uma div que os usuários não podem ler sem rolar para baixo. Você pode fazer a div de deslocamento para qualquer local, chamando uma função JavaScript com o código semelhante ao mostrado abaixo:

var divObject = document.getElementById ("divToScrollID"); divObject.scrollTop = 100;

Este código encontra a div cuja ID é "divToScrollID" e faz com que ela se desloque para um local de 100 pixels de borda superior dessa div. Você pode até mesmo fazê-la rolar para o topo automaticamente, definindo o valor "scrollTop" a zero.

Múltiplas rolagens

A página da web pode conter tantas divs quanto necessárias para exibir seu conteúdo. Uma div pode conter uma galeria de imagens, enquanto outras pode mostrar uma história curta. Uma forma interessante de apresentar duas dessas divs pode deixar o texto da história rolar ao mesmo tempo que as imagens rolam. Crie esse efeito, chamando uma função que rola ambas as divs como mostrado abaixo.

divObject1.scrollTop + = increment1; divObject2.scrollTop + = increment2;

Se os valores de increment1 e increment2 forem de 20, cada clique de botão faria ambas as divs rolarem 20 pixels. Usando duas variáveis ​​para armazenar os valores de incremento, você pode fazer com que cada div role de forma independente por um valor diferente.

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