Exemplo
Executar um JavaScript quando um <div> elemento está a ser enrolado:
<div onscroll="myFunction()"> Tente você mesmo " Definição e Uso
O evento onscroll ocorre quando a barra de rolagem de um elemento está a ser enrolado.
Dica: use o CSS estouro propriedade de estilo para criar uma barra de rolagem para um elemento.
Suporte navegador
| Evento | |||||
|---|---|---|---|---|---|
| onscroll | sim | sim | sim | sim | sim |
Sintaxe
Em HTML:
Em JavaScript:
object .onscroll=function(){ Tente você mesmo " Em JavaScript, usando o addEventListener() Método:
object .addEventListener("scroll", myScript );
Tente você mesmo " Nota: O addEventListener() método não é suportado no Internet Explorer 8 e versões anteriores.
Detalhes técnicos
| Bolhas: | Não |
|---|---|
| cancelable: | Não |
| Tipo de evento: | UIEvent |
| tags HTML suportadas: | <endereço>, <blockquote>, <corpo>, <subtítulo>, <centro>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> para <h6>, <html>, <li>, <Menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
| DOM Versão: | Nível 2 Eventos |
mais Exemplos
Exemplo
Alternar entre os nomes de classe em diferentes posições de rolagem - Quando o usuário rola para baixo 50 pixels a partir do topo da página, o nome da classe "test" será adicionado a um elemento (and removed when scrolled up again) .
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
= "";
}
}
Tente você mesmo " Exemplo
Deslize em um elemento quando o usuário tem rolado para baixo 350 pixels a partir do topo da página (add the slideUp class) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
Tente você mesmo " <Objeto de evento