HTML атрибут событий `onscroll`

Значение и применение

Атрибут событий onscroll позволяет задать срабатывание скрипта во время прокручивания полосы прокрутки элемента.

Поддержка браузерами

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Element.scroll_event
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
scroll event	✓1	✓12	✓6	✓≤12.1	✓1.3	✓18	✓6	✓≤12.1	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

HTML

<element onscroll = "script" >

Примеры, попробуйте сами

Событие scroll

Нажмите ▶. Прокрутите содержимое области.

index.html

HTML

<div id="scrl" style="border: 1px solid; width: 200px; height: 150px; overflow: scroll">
  Съешь же ещё этих мягких французских булок, да выпей чаю. Съешь же ещё этих мягких французских булок, да выпей
  чаю.Съешь же ещё этих мягких французских булок, да выпей чаю. Съешь же ещё этих мягких французских булок, да выпей
  чаю.
</div>

main.js

JavaScript

function scrl() {
    document.getElementById('scrl').style.backgroundColor = 'orange'
}
document.getElementById('scrl').addEventListener('scroll', scrl)

Отличия HTML 4.01 от HTML 5

Атрибут событий onscroll добавлен в HTML5.

Поддерживаемые теги

<address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>.

HTML атрибут событий onscroll