Событие onscroll

События DOM Объект Event

Определение и использование

Событие 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 Поддержка Поддержка Поддержка Поддержка Поддержка
События DOM Объект Event