如何检测用户何时滚动到 div 的底部？

任务是在用户使用 JQuery 滚动到底部时检测

元素的底部。这里讨论了几种方法。

• jQuery on() 方法：
  此方法为所选元素和子元素添加一个或多个事件处理程序。
  句法：

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

  参数：

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

示例 1：此示例警告当用户使用 class = div 滚动到 div 元素的底部时，您已到达 DIV 的末尾。

  

    
        JQuery 
      | Detecting when user scrolls to bottom of div.
    



  

     
            GeeksForGeeks 
        
    
    
    
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
    
    
        $('#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');
            }
        });
    

  

输出：

• 在到达底部之前：
  
• 到达底部后：
  

示例 2：此示例提示到达 DIV 结束！当用户使用 class = div 滚动到 div 元素的底部时。

  

    
        JQuery 
      | Detecting when user scrolls to bottom of div.
    



  

     
            GeeksForGeeks 
        
    
    
    
        
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
            GeeksforGeeks
        
    
    
        $('#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!');
                }
            });
        });
    

  

输出：

• 在到达底部之前：
  
• 到达底部后：
  

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。