|
|
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 |
| 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 |
| 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 |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | Drag Events Attribute |
Uploaded by: | Admin |
Reffered: https://www.w3schools.com/tags/ev_onscroll.asp