HTML | DOM onscroll Event

Last Updated : 27 Jul, 2021

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>