Evento onscroll

Eventos DOM Objeto Evento

Definição e uso

O evento onscroll ocorre quando a barra de rolagem do elemento é rolada.

Dica:Use CSS overflow A propriedade de estilo cria uma barra de rolagem para o elemento.

Exemplo

Exemplo 1

Executar JavaScript ao rolar o elemento <div>:

<div onscroll="myFunction()">

Experimente você mesmo

Exemplo 2

Alternar entre nomes de classes em diferentes posições de rolagem - Quando o usuário rola 50 pixels da parte superior para baixo da página, o nome da classe "test" será adicionado ao elemento (será removido novamente ao rolar para cima).

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

Experimente você mesmo

Exemplo 3

Quando o usuário rolar 350 pixels para baixo da parte superior da página, insira o elemento (adicionar classe slideUp):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

Experimente você mesmo

Sintaxe

No HTML:

<element onscroll="myScript">

Experimente você mesmo

No JavaScript:

object.onscroll = function(){myScript};

Experimente você mesmo

No JavaScript, use o método addEventListener():

object.addEventListener("scroll", myScript);

Experimente você mesmo

Notas:Internet Explorer 8 ou versões anteriores não suportam Método addEventListener()。

Detalhes técnicos

Bubbling: Não suportado
Cancelável: Não suportado
Tipo de evento: Se gerado pela interface do usuárioUiEvent。Caso contrário Evento。
Suportadas etiquetas HTML: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
Versão DOM: Eventos Level 2

Suporte do navegador

Evento Chrome IE Firefox Safari Opera
onscroll Suporte Suporte Suporte Suporte Suporte
Eventos DOM Objeto Evento