HTML onscroll Event Attribute - HTML Drag Events Attribute

The onscroll event attribute in HTML triggers a script when an element's scrollbar is being scrolled. This attribute can be applied to any HTML element that has a scrollable overflow, typically achieved by setting the CSS overflow property to scroll, auto, or overlay.

Example of HTML onscroll Event Attribute

It will Execute a JavaScript when a <div> element is being scrolled.

index.html

Example: HTML

 <div onscroll="myFunction()">

Output should be:

Definition and Usage of HTML onscroll Event Attribute

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

Tip: use the CSS overflow style property to create a scrollbar for an element.

Browser Support of HTML onscroll Event Attribute

Syntax of HTML onscroll Event Attribute

<element onscroll="script">

Attribute Values of HTML onscroll Event Attribute

Value	Description
script	The script to be run on onscroll

Technical Details of HTML onscroll Event Attribute

Supported HTML 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>

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:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Drag Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference