What are scrollstart and scrollstop events in jQuery ?

Last Updated : 29 Jan, 2023

In this article, we will learn about jQuery scrollstart and scrollstop events and how to handle them correctly. The scrollstart event is triggered when the user starts to scroll the page and scrollstop event is triggered when the user stops to scroll the page.

Syntax:

$("selector").on("scrollstart",function(event) {
    // do something
})

$("selector").on("scrollstop",function(event) {
    // do something
})

Parameter:

function(event): The function includes an optional event object that can consist of any jQuery event attributes (e.g. event.target, event.type, etc.). Required. When the scrollstart or scrollstop event happens, this function is called.

Example 1: In this example, a pop-up will appear when we start and stop scrolling inside the box.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Scroll Event</title> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src= 
        "https://code.jquery.com/jquery-1.11.1.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="display: flex;  
        justify-content: center; margin-top: 120px"> 
        <div> 
            <h3>scroll start example</h3> 
            <div style=" 
            width: 500px; 
            height: 100px; 
            border: 1px solid black; 
            overflow: scroll; 
            margin-right: 20px; 
            color: green; 
          " id="div1"> 
                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> 
        </div> 
        <div> 
            <h3>scroll stop example</h3> 
            <div style=" 
            width: 500px; 
            height: 100px; 
            border: 1px solid black; 
            overflow: scroll; 
            color: green; 
          " id="div2"> 
                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. 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> 
        </div> 
    </div> 
  
    <!-- jQuery code to show the working of this method -->
    <script> 
        $(document).ready(function () { 
            $("#div1").on("scrollstart", function () { 
                alert("scroll start"); 
            }); 
            $("#div2").on("scrollstop", function () { 
                alert("scroll stop"); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Example 2: In this example, we will change the background color by scrolling inside the box.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>scroll event</title> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="display: flex;  
        justify-content: center; margin-top: 120px"> 
        <div> 
            <h3>scroll start example</h3> 
            <div style=" 
            width: 500px; 
            height: 120px; 
            border: 1px solid black; 
            overflow: scroll; 
            margin-right: 20px; 
            color: red; 
          " id="div1"> 
                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!  
                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!  
                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> 
        </div> 
        <div> 
            <h3>scroll stop example</h3> 
            <div style=" 
            width: 500px; 
            height: 120px; 
            border: 1px solid black; 
            overflow: scroll; 
            color: red; 
          " id="div2"> 
                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. 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. 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> 
        </div> 
    </div> 
  
    <!-- jQuery code to show the working of this method -->
    <script> 
        $(document).ready(function () { 
            $("#div1").on("scrollstart", function () { 
                $("#div1").css("background", "lightgreen"); 
            }); 
            $("#div2").on("scrollstop", function () { 
                $("#div2").css("background", "yellow"); 
            }); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Suggest improvement

How to create Dynamic Drag and Drop table rows using jQuery Ajax ?

How to use setInterval() method inside React components ?

Share your thoughts in the comments

What are scrollstart and scrollstop events in jQuery ?

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?