Syntax error HTML onscroll Event Attribute

HTML onscroll Event Attribute

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>

Output

Scroll through the paragraph content to observe how onscroll event attribute works −

Updated on: 2019-09-26T08:50:33+05:30

229 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements