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 | HTML Drag Events Attribute |
| Definition and Usage of HTML onscroll Event Attribute | HTML Drag Events Attribute |
| Browser Support of HTML onscroll Event Attribute | HTML Drag Events Attribute |
| Syntax of HTML onscroll Event Attribute | HTML Drag Events Attribute |
| Attribute Values of HTML onscroll Event Attribute | HTML Drag Events Attribute |
| Technical Details of HTML onscroll Event Attribute | HTML Drag Events Attribute |
| How to Execute a JavaScript when a <div> element is being scrolled | HTML Drag Events Attribute |
| List of Drag Events Attribute | HTML Drag Events Attribute |
| HTML ondrag Event Attribute | HTML Drag Events Attribute |
| HTML ondragend Event Attribute | HTML Drag Events Attribute |
| HTML ondragend Event Attribute | HTML Drag Events Attribute |
| HTML ondragleave Event Attribute | HTML Drag Events Attribute |
| HTML ondragover Event Attribute | HTML Drag Events Attribute |
| HTML ondragstart Event Attribute | HTML Drag Events Attribute |
| HTML ondrop Event Attribute | HTML Drag Events Attribute |
| HTML onscroll Event Attribute | HTML Drag Events Attribute |
|
Type
: |
html |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Drag Events Attribute |
|
Uploaded by
: |
Admin |