jQuery Scroll Event



The scroll event is triggered whenever you drag the scroll bar, or use the keyboard (for example, the up, down, home, end, and similar keys) or mouse scroll wheel to scroll a web page. If the page does not has any scrollbar, no scroll event is ever triggered. Some programmers use this event to help figure out where elements (after a page has scrolled) appear on the screen.

Let us learn with a simple example.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</script>
<script>
scrollcount=0;
$(document).ready(function(){
  $("div").scroll(function(){
    $("span").text(scrollcount+=1);
  });
});
</script>
</head>
<body>

<p>Try the scrollbar in the div</p>
<div style="border:1px solid black;width:250px;height:150px;overflow:scroll;">The jQuert tutorial showing the effect of the scroll. Every time you scroll, the count increases. 
<br><br>
While doing anything you should watch your mind. This brings meditative quality to you mind. Just by watching you are able to master your mind. You are no more slave</div>
<p>Scroll Count :<span>0</span> </p>

</body>
</html>




You may like to try this example here.