событие прокрутки
Пример
Выполнение JavaScript при прокрутке элемента <div>:
<div onscroll="myFunction()">
Определение и использование
Событие onscroll происходит, когда полоса прокрутки элемента прокручивается.
Совет: используйте свойство стиля переполнения CSS , чтобы создать полосу прокрутки для элемента.
Поддержка браузера
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
Синтаксис
В HTML:
<element onscroll="myScript">
В JavaScript:
object.onscroll = function(){myScript};
В JavaScript с помощью метода addEventListener():
object.addEventListener("scroll", myScript);
Примечание. Метод addEventListener() не поддерживается в Internet Explorer 8 и более ранних версиях.
Технические детали
Пузыри: | Нет |
---|---|
Отменяемо: | Нет |
Тип события: | UiEvent , если генерируется из пользовательского интерфейса, Event в противном случае |
Поддерживаемые HTML-теги: | <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > в <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
Версия ДОМ: | События уровня 2 |
Дополнительные примеры
Пример
Переключение между именами классов в разных позициях прокрутки. Когда пользователь прокручивает страницу на 50 пикселей вниз, имя класса «тест» будет добавлено к элементу (и удалено при повторной прокрутке вверх).
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 = "";
}
}
Пример
Вставьте элемент, когда пользователь прокрутит страницу на 350 пикселей вниз (добавьте класс slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}