Событие onscroll
Определение и использование
Событие onscroll occurs when the scrollbar of an element is scrolled.
Совет:Используйте CSS overflow Стильные свойства создают полосу прокрутки для элемента.
Пример
Пример 1
Выполнение JavaScript при прокрутке элемента <div>:
<div onscroll="myFunction()">
Пример 2
Переключение между именами классов в различных положениях прокрутки - когда пользователь прокручивает страницу от верха вниз на 50 пикселей, класс "test" будет добавлен к элементу (при повторном прокрутке вверх будет удален).
window.onscroll = function() {myFunction()}; function myFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("myP").className = "test"; } document.getElementById("myP").className = ""; } }
Пример 3
Когда пользователь скроллит с верхнего края страницы вниз на 350 пикселей, введите элемент (добавьте класс slideUp):
window.onscroll = function() {myFunction()}; function myFunction() { if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) { document.getElementById("myImg").className = "slideUp"; } }
Синтаксис
В HTML:
<element onscroll="myScript">
В JavaScript:
object.onscroll = function(){myScript};
В JavaScript, используя метод addEventListener():
object.addEventListener("scroll", myScript);
Комментарий:Internet Explorer 8 и более ранние версии не поддерживают Метод addEventListener()。
Технические детали
Бубнение: | Не поддерживается |
---|---|
Может быть отменено: | Не поддерживается |
Тип события: | Если событие создано из пользовательского интерфейса: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> |
Версия DOM: | Уровень 2 событий |
Поддержка браузеров
События | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
onscroll | Поддержка | Поддержка | Поддержка | Поддержка | Поддержка |