Open In App

HTML onscroll Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The onscroll attribute works when an element scrollbar is being scrolled. To create a scrollbar in an element, use the CSS overflow property.

It is triggered when the content within an HTML element is scrolled and used to implement dynamic behaviors based on the scroll position and employed for creating effects like parallax scrolling or revealing elements.

Syntax: 

<element onscroll = "script">

Supported Tags

It supports all HTML elements. 

Attributes:

This attribute is supported by all HTML elements and the attribute works when the script is triggered.

Example: 

In this example, we will see the implementation of the onscroll tag with an example.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>onscroll attribute</title>
    <style>
        #gfg {
            border: 1px solid black;
            width: 400px;
            height: 100px;
            overflow: scroll;
            text-align: justify;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>onscroll attribute</h2>
 
    <div id="gfg" onscroll="Geeks()">
        <b>GeeksforGeeks:</b>
        A computer science portal for
        geeks.It ia a good wqebsite for learning computer
        science. It has a good programming Question and have
        many Interwiew Experiences. Prepare for the Recruitment
        drive of product based companies like Microsoft,
        Amazon, Adobe etc with a free online placement
        preparation course. The course focuses on various
        MCQ's & Coding question likely to be asked in the
        interviews & make your upcoming placement season
        efficient and successful.
    </div>
    <script>
        function Geeks() {
            document.getElementById("gfg")
            .style.color = "green";
        }
    </script>
</body>
 
</html>


Output: 

az

Output

Example2 :

In this example, we will see the implementation of the above onscroll with an example.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>onscroll attribute</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
 
        section {
            width: 80%;
            margin: auto;
            padding: 20px;
        }
 
        #content {
            border: 1px solid #ccc;
            padding: 20px;
            height: 300px;
            overflow: scroll;
            transition: color 0.3s ease;
        }
    </style>
</head>
 
<body>
    <section>
        <div id="content" onscroll="changeFontColor()">
            <p><strong>
                    GeeksforGeeks is an portal for computer
                    geeks where you will find a bunch of articles, quizzes on
                    programming and algorithm. As top product based
                      companies want to hire an employee with great
                    programming skills and it is the perfect place
                      to begin and master them. You will find problems as
                    categorized in school, easy, medium, hard,advanced.
                      There is a lot of variety of problems there and
                    you will find a multiple solution for one problem
                      which improves your perception about how you see
                    the problem, and how you should approach the problem.
                      If you are beginner you can start with basic
                    or easy category and once you find comfortable
                      yourself you can move to higher level.
                    If you want to learn a algorithm you should have
                      a patience because it requires time, discipline.
                    You have to move step by step. Make a proper goal
                      and give yourself enough time atleast 5–6 months
                    to learn. Try to solve atleast one question per day.
                      Learn with mistakes and improve yourself.
                    Note:- Before going to give coding test for any
                      companies make sure you should do “must do coding
                    question on geeks for geeks”.</strong></p>
        </div>
    </section>
</body>
 
</html>


Output:

swe

Output

Supported Browsers:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 6 and above
  • Opera 11.6 and above
  • Safari 2 and above


Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads