mozilla
Os seus resultados da pesquisa

    window.onscroll

    Sumário

    Especifica a função a ser chamada quando é feito o scroll na janela.

    Sintaxe

    window.onscroll = funcRef;
    
    • funcRef é uma função de referência.

    Exemplos

    Exemplo 1: Genérico

    window.onscroll = function (oEvent) {
      // executa um bloco de código ou funções, quando o scroll é feito na janela.
    }
    

    Examplo 2: Dectando a rolagem

    O exemplo a seguir, irá disparar um alerta sempre que o usuário rolar a página .

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>onscroll test</title>
    <script type="text/javascript">
    window.onscroll = scroll;
    
    function scroll () {
     alert("evento scroll detectado! " + window.pageXOffset + " " + window.pageYOffset);
     // nota: você pode usar window.innerWidth e window.innerHeight para obter a largura e altura da área de visão.
    }
    </script>
    </head>
    
    <body>
    <p>Redimensione a janela</p>
    <p>para um tamanho pequeno,</p>
    <p>e use a barra de rolagem</p>
    <p>para mover ao redor do conteúdo da página</p>
    <p>na janela.</p>
    </body>
    </html>
    

    O exemplo a seguir irá mostrar um link( uma imagem de seta ) no topo da página quando a rolagem vertical atingir 500 pixels

     

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>MDN Example</title>
    <script type="text/javascript">
    var bAppended = false, oBookmark = document.createElement("div");
    oBookmark.id = "arrowUp";
    oBookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">&uarr;<\/a>";
     
    onscroll = function() {
      var nVScroll = document.documentElement.scrollTop || document.body.scrollTop;
      bAppended = nVScroll > 500 ?
        bAppended || (document.body.appendChild(oBookmark), true)
        : bAppended && (document.body.removeChild(oBookmark), false);
    };
    </script>
    <style type="text/css">
    #arrowUp {
      position: fixed;
      height: auto;
      width: auto;
      right: 10px;
      top: 10px;
      font-size: 48px;
    }
    #arrowUp a {
      text-decoration: none;
      color: black;
      font-weight: bold;
      font-family: serif;
    }
    </style>
    </head>
    
    <body>
    <p>Conteúdo da página aqui!</p>
    </body>
    
    </html>

    Notas

    bug 189308, nas versões antigas do Gecko, o evento 'onscroll' era executado apenas quando a barra de rolagem era arrastada, não quando utilizada a seta do teclado ou scroll do mouse.
    Esse bug foi corrigido no Gecko 1.8/Firefox 1.5

    Quando o window.scrollX/scrollY não é 0 -- considerando que o scroll ocorreu por algum script ou uma ação manual -- recarregando a página irá disparar o evento onscroll imediatamente.

    Especificação

    Etiquetas do documento e colaboradores

    Contribuíram para esta página: khalid32, Leeehandro, teoli
    Última atualização por: khalid32,
    Esconder painel