jQuery scroll() Method

Last Updated:

jQuery scroll() Method

The jQuery scroll() method is used for the following 2 purpose

  1. To run a callback when a specified element is scrolled.
  2. To trigger the scroll event of a specified element.

Run a Callback

In the following example, we will run a callback function when a specified element is scrolled.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> div{ border: 1px solid black; line-height: 2; width: 150px; height: 100px; overflow-y: scroll; } </style> </head> <body> <h1>jQuery scroll() Method</h1> <div> Here is some dummy text to make the div scrollable. Please don't forget to scroll up and down. </div> <p>Scroll - <span id="point">0</span></p> <script> $(document).ready(function(){ var count = 0; $("div").scroll(function(){ count += 1; $("#point").text(count); }); }); </script> </body> </html>

Syntax

$(selector).scroll(callback);

Parameter Values

ValueTypeExplanation
callback Optional Specifies a function to be called once user is scrolling on a element which is scrollable.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
scroll()YesYesYesYesYesYesYesYesYesYesYesYesYes

Trigger a scroll Event

In the following example, we will trigger a scroll event when a button is clicked.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery scroll() Method</h1> <div> Here is some dummy text to make the div scrollable. Please don't forget to scroll up and down. </div> <button>Trigger scroll Event</button> <p>Scroll - <span id="point">0</span></p> <script> $(document).ready(function(){ var count = 0; $("div").scroll(function(){ count += 1; $("#point").text(count); }); $("button").click(function(){ $("div").scroll(); }); }); </script> </body> </html>

Share this Page

Meet the Author