HTML onscroll Event Attribute

HTML Web Development Front End Technology

The HTML onscroll event attribute is triggered when an HTML element is scrolled by using its scrollbar in an HTML document.

Syntax

Following is the syntax −

<tagname onscroll=”script”></tagname>

Let us see an example of HTML onscroll event Attribute −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      padding: 20px;
   }
   .box-para {
      border: 2px solid #fff;
      padding: 10px;
      width: 200px;
      height: 200px;
      overflow: scroll;
      margin: 1rem auto;
   }
</style>
</head>
<body>
<h1>HTML onscroll Event Attribute Demo</h1>
<p onscroll="scrollFn()" class="box-para">
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text.</p>
<p>Scroll above paragraph text to increase its font size</p>
<script>
   function scrollFn() {
      document.querySelector(".box-para").style.fontSize = "1.5rem";
   }
</script>
</body>
</html>