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

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

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

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

Атрибут событий	Chrome	Firefox	Opera	Safari	IExplorer	Edge
onscroll	Да	Да	Да	Да	Да	Да

Синтаксис

<element onscroll = "script" >

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Событие onmousemove и onmouseout</title>
<style> 
div {
width : 200px; /* задаём ширину блока */
height : 150px; /* задаём высоту блока */
border : 1px solid; /* задаём сплошную границу 1px */
overflow : scroll; /* при переполнении содержимое обрезается и добавляется полоса прокрутки, что нам и надо для демонстрации  */
}
</style>
</head>
<body>
<div id = "scrl"onscroll = "scrl()">
Съешь же ещё этих мягких французских булок, да выпей чаю. Съешь же ещё этих мягких французских булок, да выпей чаю.Съешь же ещё этих мягких французских булок, да выпей чаю. Съешь же ещё этих мягких французских булок, да выпей чаю.
</div>
<script>
function scrl() {/* задаём функцию, которая изменяет цвет заднего фона у элемента с определённым id */
 document.getElementById("scrl").style.backgroundColor = "orange";
}
</script>
</body>
</html>

Для демонстрации атрибута событий onscroll прокрутите полосу прокрутки следующего элемента:

Съешь же ещё этих мягких французских булок, да выпей чаю. Съешь же ещё этих мягких французских булок, да выпей чаю.Съешь же ещё этих мягких французских булок, да выпей чаю. Съешь же ещё этих мягких французских булок, да выпей чаю.

Отличия 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>.

Атрибуты событий