The HTML DOM onscroll event occurs when a scrollbar is used. CSS overflow is used to create a scrollbar.
Supported 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>
Syntax:
-
In HTML:
<element onscroll="myScript">
-
In JavaScript:
object.onscroll = function(){myScript};-
In JavaScript, using the addEventListener() method:
object.addEventListener("scroll", myScript);Example: Using the addEventListener() method
html
<!DOCTYPE html><html>
<head>
<title>
HTML DOM onscroll Event
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onscroll Event</h2>
<textarea style="width:100%" id="tID">
HTML stands for Hyper Text Markup Language.
It is used to design web pages using markup language.
HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages.
Markup language is used to define the text document
within tag which defines the structure of web pages.
HTML is a markup language which is used by the browser
to manipulate text, images and other content to
display it in required format.
</textarea>
<p id="try"></p>
</center>
<script>
document.getElementById(
"tID").addEventListener("scroll", GFGfun);
function GFGfun() {
document.getElementById(
"try").innerHTML = "Textarea scrolled.";
}
</script>
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by HTML DOM onscroll Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera