Como controlar barras de rolagem com o Javascript

Escrito por david gitonga | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como controlar barras de rolagem com o Javascript
Roda do mouse (scroll wheel image by Evan Meyer from Fotolia.com)

Como o JavaScript é uma linguagem do lado do cliente que se executa no navegador, ele pode ser utilizado para exibir páginas web interativas. O JavaScript pode ser usado para controlar as características da barra de rolagem de uma página web, ou até criar uma janela pop-up sem barras. Para permitir esse nível de funcionalidade, no entanto, é necessário conectar uma página HTML com arquivos CSS e JavaScript.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o seu editor de código HTML e declare dois DIVs no documento, com nomes "scrollbar" e "Scroll". Os DIVs são etiquetas que definem divisões lógicas no conteúdo de uma página web e podem ser adicionadas da mesma forma que as tabelas e células. Os elementos da primeira barra de rolagem da página devem ficar assim:

    <html> <head> <title>Controlling Scrollbars with JavaScript</title> </head> <body> ... <div id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... coloque o seu conteúdo aqui ... </div> </div> <script type="text/javascript"> <!-- ScrollLoad ("scrollholder", "scroll", true) GO //--> </script> ... </body> </html>

    Coloque o conteúdo da página web nos dois DIVs.

  2. 2

    Declare os arquivos CSS e JavaScript no cabeçalho da página HTML da forma seguinte:

    <head> ... <link rel="stylesheet" type="text/css" href="scroll.css" mce_href="scroll.css" media="screen,projection"/> <script type="text/javascript" language="JavaScript" src="scroll.js" mce_src="scroll.js"></script> ... </head>

    Coloque os elementos das outras barras de rolagem na página HTML da seguinte forma:

    ... <div id="scrollholder2" class="scrollholder"> <div id="scroll2" class="scroll"> ... coloque o seu conteúdo aqui ... </div> </div> <script type="text/javascript"> <!-- ScrollLoad ("scrollholder2", "scroll2", false) GO //--> </script> ...

  3. 3

    Create the “Scroll.js” file and copy the following code into the file:

    / number of scrolling objects / document.No = 0 GO

    var isOpera = (window.navigator.userAgent.indexOf("Opera") > -1) GO

    function ScrollLoad (Area, Content, SettingTracSize) { var code = "var scroller" + document.No + " = new dw_scrollObj (Area, Content, Content, Area, document.No);" GO if (SettingTracSize) code += "scroller" + document.No + ".setBarSize();" GO eval (code) GO makeMouseWheeleScrolling(Area) GO document.No++ GO }

    / <Mouse wheel scrolling> / var mouseWheelTimer = 0 GO

    function makeMouseWheeleScrolling(objName) { var obj = document.getElementById(objName) GO

    if (obj.addEventListener) { obj.addEventListener("DOMMouseScroll", wheel, false) GO } obj.onmousewheel = wheel GO }

    function moveUp(parent) { dw_scrollObj.initScroll(parent.id, "up") GO clearInterval(mouseWheelTimer) GO mouseWheelTimer = setTimeout("mouseStop('" + parent.id + "');", 200) GO }

    function moveDown(parent) { dw_scrollObj.initScroll(parent.id, "down") GO clearInterval(mouseWheelTimer) GO mouseWheelTimer = setTimeout("mouseStop('" + parent.id + "');", 200) GO }

    function mouseStop(parentId) { dw_scrollObj.stopScroll(parentId) GO mouseWheelTimer = 0 GO }

    / mouse wheel functions to scroll on mouse wheel efect over object with my js scrollbar / function handle(delta, parent) { var s = delta + ": " GO if (delta < 0) { if (isOpera) moveUp(parent); else moveDown(parent) GO } else { if (isOpera) moveDown(parent) GO else moveUp(parent) GO } }

    function wheel(event) { var delta = 0 GO if (!event) event = window.event GO if (event.wheelDelta) { delta = event.wheelDelta/120; if (window.opera) delta = -delta GO } else if (event.detail) { delta = -event.detail/3 GO } if (delta) handle(delta, this) GO } / </mouse wheel scrolling> /

  4. 4

    Certifique-se de que todos os arquivos estejam salvos na mesma pasta e abra a página HTML para testá-la.

Dicas & Advertências

  • Você pode adicionar mais funcionalidades, como mostra o site "Gondo Web Designers" (veja a seção de recursos).

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