onscroll jquery – jquery on scroll event Example

onscroll jquery A scroll event is sent whenever the element’s scroll position changes, regardless of the cause.

onscroll jquery

The event is triggered when the user moves the scrollbar up or down. jQuery scroll() function triggers when the element is scrolled.

Syntax of jquery on scroll

Trigger the scroll event for the selected elements:

Free Live Chat for Any Issue

$(selector).scroll()

Attach a function to the scroll event:

$(selector).scroll(function)

jquery on scroll down

Check current scrollTop vs previous scrollTop

var endScrlTp = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > endScrlTp){
       // downscroll source code
   } else {
      // upscroll source code
   }
   endScrlTp = st;
});

jQuery scroll() method

index.html

<!DOCTYPE html>  
<html>  
<head>  
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
<style>  
#dhara{  
width: 250px;  
height: 150px;  
overflow: scroll;  
border: 2px solid red;  
font-size: 25px;  
}  
</style>  
</head>  
  
<body>  
<h2> Welcome To Pakainfo.com :):) </h2>  
<h3> Scroll the bordered text to see the effect. </h3>  
<p> This is an example of using the <b> scroll() </b> method. </p>  
<p id = "dhara"> Pakainfo.com website focuses on all web language and framework tutorial PHP, Laravel, Codeigniter, Nodejs, API, MySQL, AJAX, jQuery, JavaScript, Demo. </p>  
<script>  
$(document).ready(function(){  
	$("#dhara").scroll(function(){  
	$("#dhara").css("color", "red");  
	$("#dhara").css("background", "lightgreen");  
	});  
});  
</script>  
</body>  
</html>  

Don’t Miss : Add Class On Scroll Jquery

I hope you get an idea about onscroll jquery.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this Article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.