onscroll událost
Příklad
Spustit JavaScript, když se posouvá prvek <div>:
<div onscroll="myFunction()">
Definice a použití
K události onscroll dochází, když se posouvá posuvník prvku.
Tip: Pomocí vlastnosti stylu přetečení CSS vytvořte posuvník pro prvek.
Podpora prohlížeče
| Event | |||||
|---|---|---|---|---|---|
| onscroll | Yes | Yes | Yes | Yes | Yes |
Syntax
V HTML:
<element onscroll="myScript">
V JavaScriptu:
object.onscroll = function(){myScript};
V JavaScriptu pomocí metody addEventListener():
object.addEventListener("scroll", myScript);
Poznámka: Metoda addEventListener() není podporována v aplikaci Internet Explorer 8 a starších verzích.
Technické údaje
| bubliny: | Ne |
|---|---|
| Zrušitelné: | Ne |
| Typ události: | UiEvent , pokud je generován z uživatelského rozhraní, Event jinak |
| Podporované HTML tagy: | <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > až <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
| Verze DOM: | Události úrovně 2 |
Další příklady
Příklad
Přepínání mezi názvy tříd na různých pozicích posouvání – Když uživatel posouvá dolů 50 pixelů od horní části stránky, bude k prvku přidán název třídy „test“ (a při opětovném posunu nahoru odstraněn).
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 = "";
}
}
Příklad
Zasuňte prvek, když uživatel posune dolů 350 pixelů od horní části stránky (přidejte třídu slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}