How to Execute a JavaScript when a <div> element is being scrolled
Try the scrollbar in div.
A function is triggered when you scroll in div. The function sets the color of the text in div to red.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Try the scrollbar in div.</p>
<div id="myDIV" onscroll="myFunction()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.color = "red";
}
</script>
<p>A function is triggered when you scroll in div. The function sets the color of the text in div to red.</p>
</body>
</html>
Output should be:
| Example of HTML onscroll Event Attribute | Drag Events Attribute |
| Definition and Usage of HTML onscroll Event Attribute | Drag Events Attribute |
| Browser Support of HTML onscroll Event Attribute | Drag Events Attribute |
| Syntax of HTML onscroll Event Attribute | Drag Events Attribute |
| Attribute Values of HTML onscroll Event Attribute | Drag Events Attribute |
| Technical Details of HTML onscroll Event Attribute | Drag Events Attribute |
| How to Execute a JavaScript when a <div> element is being scrolled | Drag Events Attribute |
| List of Drag Events Attribute | Drag Events Attribute |
| HTML ondrag Event Attribute | Drag Events Attribute |
| HTML ondragend Event Attribute | Drag Events Attribute |
| HTML ondragend Event Attribute | Drag Events Attribute |
| HTML ondragleave Event Attribute | Drag Events Attribute |
| HTML ondragover Event Attribute | Drag Events Attribute |
| HTML ondragstart Event Attribute | Drag Events Attribute |
| HTML ondrop Event Attribute | Drag Events Attribute |
| HTML onscroll Event Attribute | Drag Events Attribute |
Type: | html |
Category: | Web Tutorial |
Sub Category: | Drag Events Attribute |
Uploaded by: | Admin |