html подія onscroll
Подія onscroll викликається, коли користувач прокручує вміст елемента.
На відміну від події onwheel (коліщатко миші), його можуть генерувати тільки прокручуваний елементи або вікно (window). Але воно генерується завжди, за будь-якого прокручування, не обов'язково «мишкою».
Деякі області застосування onscroll:
Показ додаткових елементів навігації при прокручуванні.
Вантаження і ініціалізація елементів інтерфейсу, які стали видимими після прокрутки.
Зображення прикладу
- Порада
-
Використовуйте властивість CSS стилю overflow, що створити смугу прокручування для елемента.
автор: с3с
Синтаксис
<element onscroll="script">Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML події onscroll
HTML
<b id="showScroll"></b>
<div id="div">
Покрути мене в низ будь ласка ))
</div>CSS
#showScroll{
position: fixed;
top:30%;
}JS
document.getElementById('div').style.height = 1.5 * window.outerHeight + 'px';
window.onscroll = function () {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
document.getElementById('showScroll').innerHTML = "Ви прокрктили :" + scrolled + 'px';
document.getElementById('div').style.height = scrolled * 2 + window.outerHeight + 'px';
};
//# sourceURL=pen.jsПриклад використання HTML події onscroll дляbody
HTML
<body onscroll="f()">
<b id="showScroll"></b>
<div id="div">
Покрути мене в низ будь ласка ))
</div>CSS
#showScroll{
position: fixed;
top:30%;
}Приклад використання HTML події onscroll дляdiv
HTML
<div id="target" onscroll="f()">
Подія <code>onscroll</code> викликається, коли користувач прокручує вміст елемента.
На відміну від події <code>onwheel</code> (коліщатко миші), його можуть генерувати тільки прокручуваний елементи або вікно window. Але воно генерується завжди, за будь-якої прокручуванні, не обов'язково «мишкою».
Яких-небудь особливостей події тут немає, хіба що для його використання потрібно добре уявляти, як отримати поточне значення прокрутки або прокрутити документ. Про це ми говорили раніше, в розділі Розміри і прокрутка елементів.
Деякі області застосування <code>onscroll</code>:
</div>
<div id="other">
</div>CSS
#target{
overflow: scroll;
width: 200px;
height: 100px;
}JS
function f() {
document.getElementById('other').innerHTML = "Ви використали подію <code>scroll</code>";
}
//# sourceURL=pen.jsРізниця між HTML 4.01 та HTML5
Подія onscroll з’явилася тільки в HTML5
Коментарі
Коментарів ще немає — будьте першим!