Evento de rolagem
Exemplo
Execute um JavaScript quando um elemento <div> estiver sendo rolado:
<div onscroll="myFunction()">
Definição e uso
O evento onscroll ocorre quando a barra de rolagem de um elemento está sendo rolada.
Dica: use a propriedade CSS overflow style para criar uma barra de rolagem para um elemento.
Suporte ao navegador
| Event | |||||
|---|---|---|---|---|---|
| onscroll | Yes | Yes | Yes | Yes | Yes |
Sintaxe
Em HTML:
<element onscroll="myScript">
Em JavaScript:
object.onscroll = function(){myScript};
Em JavaScript, usando o método addEventListener():
object.addEventListener("scroll", myScript);
Observação: o método addEventListener() não é compatível com o Internet Explorer 8 e versões anteriores.
Detalhes técnicos
| Bolhas: | Não |
|---|---|
| Cancelável: | Não |
| Tipo de evento: | UiEvent se gerado a partir de uma interface de usuário, Event caso contrário |
| Tags HTML suportadas: | <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > para <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
| Versão DOM: | Eventos de Nível 2 |
Mais exemplos
Exemplo
Alternar entre nomes de classe em diferentes posições de rolagem - Quando o usuário rolar para baixo 50 pixels a partir do topo da página, o nome da classe "teste" será adicionado a um elemento (e removido quando rolar para cima novamente).
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 = "";
}
}
Exemplo
Deslize em um elemento quando o usuário tiver rolado para baixo 350 pixels da parte superior da página (adicione a classe slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}