Zdarzenia#
Typ scroll#
| Typ: | scroll |
|---|---|
| Interfejs: | UIEvent |
| Sync / Async: | Async |
| Bąbelkowanie | Nie / Tak |
| Zaufane cele | Document, Element |
| Anulowanie | Nie |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu scroll musi zostać wysłane przez aplikację kliencką w chwili, kiedy widok dokumentu lub elementu uległ przewinięciu. Zdarzenie to wysyłane zostaje dopiero po wystąpieniu przewinięcia.
Wysyłanie zdarzenie scroll do węzła typu Document musi bąbelkować do widoku domyślnego. W przypadku elementów zdarzenie nie bąbelkuje.
W specyfikacji HTML5 nie występują żadne wytyczne odnośnie automatycznego odpalania przez przeglądarki internetowe zdarzenia typu scroll. Szczegółowe informacje porozrzucane są w innych dokumentach, jak np. "CSSOM View Module".
Z praktycznego punktu widzenia przewinięcie widoku elementu lub dokumentu można spowodować poprzez:
- Przewijanie przy użyciu paska przewijania (scrollbar).
- Kręcenie kółkiem myszki nad przewijalnym widokiem.
- Wciskanie następujących klawiszy w sytuacji, kiedy przewijalny widok posiada zogniskowanie: strzałka w lewo, strzałka w prawo,
Home,End,Page UpiPage Down. - Wywołanie dedykowanych metod, jak np.
Window.scroll(),Window.scrollTo(),Window.scrollBy()czy ustawienie właściwościElement.scrollTopiElement.scrollLeft.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 2px solid;
padding: 10px;
width: 200px;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<p>Przewiń zawartość kontenera myszą lub klawiaturą.</p>
<div>
<p>Jakaś zawartość przewijalnego elementu.</p>
<p>Jakaś zawartość przewijalnego elementu.</p>
<p>Jakaś zawartość przewijalnego elementu.</p>
<p>Jakaś zawartość przewijalnego elementu.</p>
</div>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var info = document.getElementById("info");
var div = document.getElementsByTagName("div")[0];
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
}
div.addEventListener("scroll", readInfo, false); // faza celu - trzeci argument nieistotny
div.parentNode.addEventListener("scroll", readInfo, true); // przechwyci zdarzenie dla div
div.parentNode.addEventListener("scroll", readInfo, false); // uchwyt nie zostanie wywołany
</script>
</body>
</html>Trzeba nadmienić, że uchwyty przez właściwość i uchwyty przez atrybut, które zarejestrowano na elemencie <body> lub elementach ramek, są traktowane tak jakby zarejestrowano je na obiekcie Window, który je zawiera. Uwaga nie dotyczy uchwytów przez metodę.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 400px;
height: 500px;
background: green;
overflow: auto;
}
</style>
</head>
<body>
<p>Przewiń zawartość strony myszą lub klawiaturą.</p>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var info = document.getElementById("info");
var div = document.getElementsByTagName("div")[0];
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
}
document.body.onscroll = readInfo;
document.body.addEventListener("scroll", readInfo, true); // uchwyt nie zostanie wywołany
document.body.addEventListener("scroll", readInfo, false); // uchwyt nie zostanie wywołany
</script>
<div>Jakieś wypełnienie.</div>
</body>
</html>