Como rolar a página horizontalmente com Javascript

Escrito por kevin lee | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como rolar a página horizontalmente com Javascript
Ajude os visitantes do site a rolar a página providenciando botões de rolagem (BananaStock/BananaStock/Getty Images)

O National Institute on Aging (Instituto Nacional do Envelhecimento) recomenda que as páginas da web não exijam rolamento horizontal. Quando o conteúdo de uma página ultrapassa as áreas ocultas da região de visualização, os navegadores exibem barras de rolagem horizontais. Os usuários devem utilizar essas barras para ver o conteúdo oculto. Se suas páginas exigem esse tipo de movimento, você pode utilizar JavaScript para criar sua própria função de rolamento horizontal.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o editor HTML ou o Bloco de Notas.

  2. 2

    Abra uma página que precise de rolamento horizontal. Escolha uma em que o conteúdo horizontal não fique apenas na área visível. Tal página depende de um usuário para rolá-la até a posição em que o conteúdo adicional possa ser visto.

  3. 3

    Cole o código abaixo entre as tags "<body>" do seu documento:

    <input type="button" value="Rolar para a direita" onclick="return scrollWindow(100)" /> <input type="button" value="Rolar para a esquerda" onclick="return scrollWindow(-100)" />

    Isso criará dois botões para você usar no teste do rolamento horizontal. O primeiro botão passa um valor de 100 para uma função JavaScript chamada "scrollWindow". O segundo botão passa o valor -100 para essa função.

  4. 4

    Cole a função "scrollWindow" entre as tags "<head>" do seu documento:

    <script type="text/javascript">

    function scrollWindow(scrollValue) {

    window.scrollBy(scrollValue, 0); } </script>

    O método window.scrollBy faz o navegador rolar tanto vertical quanto horizontalmente, o que é especificado na lista de parâmetros. O primeiro parâmetro, scrollValue, recebe o valor passado pela função. Ou seja, ele será de 100 ou -100, dependendo de qual botão foi clicado. Esses valores estão em pixels. O segundo valor, 0, diz ao navegador o quanto ele deve rolar verticalmente.

  5. 5

    Salve o documento e abra-o no navegador. Clique no botão chamado "Rolar para a direita". A página rolará para a direita de acordo com o valor especificado no código. Clique no botão "Rolar para a esquerda". A página rolará para a esquerda de acordo com o valor especificado no código.

Dicas & Advertências

  • Os botões desse exemplo enviam os valores 100 e -100. Escolha quaisquer valores que desejar quando chamar a função scrollWindow. Valores menores, como 20 e -20, farão o navegador rolar menos a página quando os usuários clicarem nos botões.
  • Quando estiver criando suas páginas, visualize-as em várias resoluções de tela antes de colocá-las em um site. Isso ajudará a descobrir quais páginas são muito largas para caber em telas que usam resoluções menores.

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