What are scrollstart and scrollstop events in jQuery ?
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 w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! </ 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 Beginner. 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 Beginner. 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 w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! Welcome to w3wiki! </ 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 Beginner. 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 Beginner. 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 Beginner. 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:
Contact Us