How to use the jQuery on() method In JQuery
The on() method is used to attach one or more events to the selected element. But, here it will be used to attach the scroll event.
Syntax:
$(selector).on(scroll, callback_function);
Example 1: The below code example will display an alert message once you have reached the end of the selected element.
html
<!DOCTYPE HTML><html><head> <title> JQuery | Detecting when user scrolls to bottom of div. </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script></head><body style="text-align:center;" id="body"> <h1 style="color:green;"> w3wiki </h1> <p id="GFG_UP" style="font-size: 17px; font-weight: bold;"> </p> <div class="div"> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> <h1>w3wiki</h1> </div> <script> $('#GFG_UP').text( 'Scroll till bottom to get alert!'); $(window).on('scroll', function () { if ($(window).scrollTop() >= $( '.div').offset().top + $('.div'). outerHeight() - window.innerHeight) { alert('You reached the end of the DIV'); } }); </script></body></html> |
Output:
How to detect when user scrolls to the bottom of a div ?
In this article, we will learn how we can detect when the user scrolls to the bottom of a div. There are a few ways available in jQuery that we can use to accomplish this task as listed below:
Table of Content
- Using the jQuery on() method
- Using the scroll() method