How to Execute a JavaScript when a <div> element is being scrolled - HTML onscroll Attribute

Div Example. 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:

Type:	html
Category:	Web Tutorial
Sub Category:	HTML Attribute
Uploaded by:	Admin