Open In App

HTML | DOM onscroll Event

Last Updated : 26 Nov, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML DOM onscroll event occurs when a scrollbar is used. CSS overflow is used to create a scrollbar.

In HTML: 

<element onscroll="myScript">
HTML
<!DOCTYPE html>
<html>
<body>
 <textarea style="width:100%" id="tID" 
 onscroll="document.getElementById('try').innerHTML = 'Textarea scrolled.';">
        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>
</body>

</html>

In JavaScript: 

object.onscroll = function(){myScript};
HTML
<!DOCTYPE html>
<html>
<body>
 <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>
 <script>
  document.getElementById("tID").onscroll = function () {
   document.getElementById("try").innerHTML = "Textarea scrolled.";
  };
 </script>
</body>
</html>

In JavaScript, using the addEventListener() method: 

object.addEventListener("scroll", myScript); 
html
<!DOCTYPE html>
<html>
<body>
 <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>
 <script>
  document.getElementById(
   "tID").addEventListener("scroll", GFGfun);

  function GFGfun() {
   document.getElementById(
    "try").innerHTML = "Textarea scrolled.";
  }
 </script>

</body>

</html>

 


Article Tags :

Similar Reads