Updated April 20, 2023
Description to jQuery Scroll Down
The jQuery scroll-down event occurs when a user scrolls down the specified element. The jQuery scroll() function triggers the scroll-down event or a function that is attached to execute when a scroll-down event ours. The jQuery scroll down event works for all scrollable elements and browser window or window object. The scroll down event can be handle by using multiple functions such as scroll() function, scrollTop() function, and animate() function.
Syntax –
var lastScroll = 0;
$(selector).scroll(function)
{
var nowScrollTop = $(this).scrollTop();
if (nowScroll > lastScroll){
// code on scrolling down
}
lastScroll = nowScroll;
});Where,
- lastScroll – This is a variable used to store the last scroll position.
- selector – This is an HTML element that is scrollable for which the scroll-down event is to be identified.
- nowScroll – This is a variable used to store the after scroll position, which is the return value of the scrollTop() function.
- nowScroll > lastScroll – This expression check whether this scroll is down or not. If it is down, then some code are to be execute.
- lastScroll = nowScroll – Assign current scroll position to last scroll position.
Working
The jQuery scroll down event occurs whenever we scroll down the scrollable HTML elements. Suppose we have a div scrollable box, whenever we scroll down the div box the jQuery scroll down event gets generate and whatever the codes or actions are to perform gets execute.
Examples of jQuery Scroll Down
To identify it and handle by scroll() function –
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title> This is an example for jQuery scroll down event </title>
<script>
var x = 0;
$(document).ready(function(){
$("div").scroll(function(){
var lastScroll = 0, del = 4;
var nowScroll = $(this).scrollTop( );
if( Math.abs(lastScroll - nowScroll ) >= del ){
if (nowScroll > lastScroll ){
$("span").text( "Scrolled Down." );
}
lastScroll = nowScroll;
}
});
});
</script>
</head>
<body>
<h2> The scroll down event. </h2>
<div style = "border:1px solid black; height:50px; width:100px; overflow:scroll; "> This is an example of scrollable box.
</div>
<span> </span>
</body>
</html>An output of the above code is –
Once we scroll down the box, the output is –
In the above code the scrollable div box is created, which can be scroll up and scroll down. When the box is scroll down, which is identifying by using this statement “nowScroll > lastScroll”, the message gets display “Scrolled Down”, as we can see in the output.
To perform the scroll down by the animate() function –
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title> This is an example for jQuery scroll down event </title>
<script>
var scrolled = 0;
function down()
{
scrolled = scrolled + 30;
$( "div" ).animate({
scrollTop : scrolled
});
alert( " Scrolled down " +scrolled+ " Px." );
}
</script>
</head>
<body>
<h2> The scroll down event. </h2>
<div style = "border : 2px solid black; width : 100px; height : 50px; background-color : yellow; overflow : scroll; "> This is an example of scrollabe box.
</div>
<button onclick = "down()"> Scroll Down </button>
</body>
</html>An output of the above code is –
Once we click on the “Scroll Down” button, the output is –
When we click on the “ok” button of an alert, the output is –
Once again if we click the “Scroll Down” button, the output is –
In the above code, the scrollable div box is created, which can be scroll up and scroll down. Farther in the code the “Scroll Down” button is there, on click of which the down() function get to execute. The down() function increase the scroll value by 30 every time whenever it is call and update the scrollTop property of the div box, which is performing by using the animate() function, So the when we click the button the div box scroll down by itself and also it will display how much position is scrolled down in pixel.
Example of jQuery scroll down event to handle for the window object –
Example #3
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery scroll down event </title>
<style>
h3 {
color: black;
}
p {
color: green;
}
span {
color: red;
display: none;
}
</style>
</head>
<body>
<h3> Scroll Down Event </h3>
<p> Some Content - - <span> Scroll Down happened! </span></p>
<script>
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( window ).scroll(function() {
var prescroll = 0;
// current scroll position is set
var cp = $(this).scrollTop();
// find down scroll
if (cp > prescroll){
$( "span" ).css( "display", "inline" );
}
});
</script>
</body>
</html>An output of the above code is –
Once we scroll down the window, the output is –
In the above code, the scroll down event is identifying on the window object. If the window is scroll down(in the minimize window), which is identifying by using this statement “cp > prescroll”, then each paragraph of the window is appending by the “scroll Down happened” text, as we can see in the above output.
Conclusion
The jQuery scroll down event occurs when the user scrolls down the scrollable element, which can be handle by using the scroll(), scrollTop(), and animate() function.
Recommended Articles
This is a guide to jQuery Scroll Down. Here we discuss the description, working of the jQuery scroll down event examples with code implementation respectively. You may also have a look at the following articles to learn more –
