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 =
< script src =
</ script >
< script src =
</ 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 =
< script src =
</ 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: