- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
<!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 −
Advertisements
To Continue Learning Please Login
Login with Google