Open In App

jQuery scroll() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery scroll() is an inbuilt method which is used to user scroll in the specified element. This method works for all scrollable elements and the browser window. 

Syntax:

$(selector).scroll(function)

Parameter: This method accepts single parameters function which is optional. It is used to specify the function to run when the scroll event is triggered. 

Below examples illustrates the scroll() method in jQuery: 
Example 1: In this example, a pop-up will come out when we scroll inside the box.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>scroll method</title>
    <script src=
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("div").scroll(function () {
                alert("scroll happened");
            });
        });
    </script>
    <style>
        div {
            border: 1px solid black;
            width: 500px;
            height: 100px;
            overflow: scroll;
        }
    </style>
</head>
  
<body>
    <!-- scroll inside this div box -->
    <div>Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!
        Welcome to GeeksforGeeks!.
        Welcome to GeeksforGeeks!
    </div>
</body>
  
</html>


Output:

 

Example 2: In this example, we will increase the text size by scrolling inside the box.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>scroll method</title>
    <script src=
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("div").scroll(function () {
                $(this).animate({ fontSize: "+=1px"});
            });
        });
    </script>
    <style>
        div {
            border: 1px solid black;
            width: 400px;
            height: 150px;
            overflow: scroll;
            font-size: 1.5em;
            color: green;
        }
    </style>
</head>
  
<body>
    <!-- scroll inside this div box -->
    <div>
        A Computer Science portal for geeks. It 
        contains well written, well thought 
        and well explained computer science and 
        programming articles, quizzes and 
        practice/competitive programming/company 
        interview Questions. 
    </div>
</body>
  
</html>


Output:

 



Last Updated : 18 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads