HTML event attribute onscroll








The onscroll attribute event is triggered when an element's scrollbar is being scrolled.

What's new in HTML5

The onscroll attribute is new in HTML5.

Syntax

<element onscroll="script or Javascript function name">

Supported Tags

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




Browser compatibility

onscroll Yes Yes Yes Yes Yes

Example

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {<!--from   ww w. j ava2 s  .c  om-->
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
}
</style>
</head>
<body>

<div id="myDIV" onscroll="myFunction()">
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. 
</div>

<script>
function myFunction() {
    console.log("scrolled");
}
</script>

</body>
</html>

Click to view the demo