jQuery scroll()

Introduction

Count the number of times the scroll is used for an element:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//from ww w .  ja  v a 2 s .c  o  m
<script>
let x = 0;
$(document).ready(function(){
  $("div").scroll(function(){
    $("span").text( x+= 1);
  });
});
</script>
</head>
<body>

<p>Try the scrollbar in the div</p>

<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>

<p>Scrolled <span>0</span> times.</p>

</body>
</html>

The scroll event occurs when the user scrolls in the specified element.

The scroll event works for all scrollable elements and the window object.

The scroll() method triggers the scroll event.

The scroll() method can also run a function when a scroll event occurs.

Trigger the scroll event for the selected elements:

$(selector).scroll()

Attach a function to the scroll event:

$(selector).scroll(function)

Parameter	Optional	Description
function	Optional.	the function to run when the scroll event is triggered

Previous Next