如何检测用户是否滚动到一个div的底部

任务是当用户滚动到底部时，使用JQuery检测<div>元素的底部。这里讨论了几种方法。

jQuery on()方法

这个方法为选定的元素和子元素添加一个或多个事件处理程序。
语法:

$(selector).on(event, childSelector, data, function, map)

参数:

event。这个参数是必需的。它指定了一个或多个事件或命名空间，以附加到选定的元素。
在有多个事件值的情况下，这些值用空格分隔。该事件必须是有效的。
childSelector。这个参数是可选的。它指定了事件处理程序应该只附加到定义的子元素。
data。这个参数是可选的。它指定了要传递给函数的额外数据。
function。这个参数是必需的。它指定了事件发生时要运行的函数。
map。它指定了一个事件地图（{event:func(), event:func(), …}），有一个或多个事件添加到选定的元素，以及事件发生时要运行的函数。

例子1：这个例子提醒你到达了DIV的终点当用户滚动到class = div的元素的底部时。

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JQuery 
      | Detecting when user scrolls to bottom of div.
    </title>
</head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
  
<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>
    </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>

输出:

在到达底部之前。
到达底部后。

实例2：本实例在用户滚动到class = div元素的底部时，发出DIV结束的警报！

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JQuery 
      | Detecting when user scrolls to bottom of div.
    </title>
</head>
<script src=
 "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
  
<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>
    <center>
        <div class="div" style="width:200px;
                                height:150px;
                                overflow:auto;">
            <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>
    </center>
    <script>
         $('#GFG_UP').text('Scroll till bottom to get alert!'); jQuery(function($ ) {
             $('.div').on('scroll', function() { if ($ (this).scrollTop() +
                     $(this).innerHeight() >=$ (this)[0].scrollHeight) {
                    
                    alert('End of DIV is reached!');
                }
            });
        });
    </script>
</body>
  
</html>

输出: