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

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

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

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

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

Атрибут событийChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
onscrollhtml5ДаДаДаДаДаДа

Синтаксис

<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>.

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