The jQuery scroll() is an inbuilt method which is used to user scroll in the specified element. This method works for all scrollable elements and the browser window.
Syntax:
$(selector).scroll(function)
Parameter: This method accepts single parameters function which is optional. It is used to specify the function to run when the scroll event is triggered.
Below examples illustrates the scroll() method in jQuery:
Example 1: In this example, a pop-up will come out when we scroll inside the box.
HTML
<!DOCTYPE html> <html> <head> <title>scroll method</title> <script src= </script> <!-- jQuery code to show the working of this method --> <script> $(document).ready(function () { $("div").scroll(function () { alert("scroll happened"); }); }); </script> <style> div { border: 1px solid black; width: 500px; height: 100px; overflow: scroll; } </style> </head> <body> <!-- scroll inside this div box --> <div>Welcome to neveropen! Welcome to neveropen! Welcome to neveropen! Welcome to neveropen! Welcome to neveropen! Welcome to neveropen! Welcome to neveropen! Welcome to neveropen! Welcome to neveropen! Welcome to neveropen! Welcome to neveropen! Welcome to neveropen!. Welcome to neveropen! </div> </body> </html> |
Output:
Example 2: In this example, we will increase the text size by scrolling inside the box.
HTML
<!DOCTYPE html> <html> <head> <title>scroll method</title> <script src= </script> <!-- jQuery code to show the working of this method --> <script> $(document).ready(function () { $("div").scroll(function () { $(this).animate({ fontSize: "+=1px"}); }); }); </script> <style> div { border: 1px solid black; width: 400px; height: 150px; overflow: scroll; font-size: 1.5em; color: green; } </style> </head> <body> <!-- scroll inside this div box --> <div> A Computer Science portal for neveropen. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions. </div> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
