Open In App

How to detect when user scrolls to the bottom of a div ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

Using the jQuery on() method

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=
    </script>
</head>
 
<body style="text-align:center;" id="body">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 17px;
            font-weight: bold;">
    </p>
    <div class="div">
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</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:

scrollDiv

Using the scroll() method

The scroll() method can be directly used to attach the scroll event to the selected element eithout using the on() method.

Syntax:

$('element_selector').scroll(call_function);

Example: The below example will explain the use of the scroll() method to detect user scrolled down to bottom or not.

html




<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        JQuery
        | Detecting when user scrolls to bottom of div.
    </title>
    <script src=
    </script>
</head>
 
<body style="text-align:center;" id="body">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 17px;
            font-weight: bold;">
    </p>
    <div class="div">
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
    </div>
    <script>
        $('#GFG_UP').text(
            'Scroll till bottom to get alert!');
 
        $(window).scroll(function () {
            if ($(window).scrollTop() >= $(
                '.div').offset().top + $('.div').
                    outerHeight() - window.innerHeight) {
 
                alert('You reached the end of the DIV');
            }
        });
    </script>
</body>
 
</html>


Output:

scrollDiv

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads