浅析jquery如何判断滚动条滚到页面底部并执行事件

下面我会详细讲解如何使用jQuery判断滚动条是否滚动到页面底部，并执行相应的操作。

判断滚动条是否滚动到页面底部的方法

常见的判断滚动条是否滚动到页面底部的方法有两种：

监听滚动事件，在滚动事件中进行判断，当滚动条滚动到底部时执行事件。
监听滚动条触底事件，当滚动条触底时执行事件。

下面分别详细介绍这两种方法。

方法一：监听滚动事件

首先，我们可以监听窗口的滚动事件。可以使用$(window).scroll()方法监听窗口的滚动事件，并获取当前滚动条距离文档顶部的距离scrollTop和窗口高度windowHeight。

然后，我们可以计算出文档的高度docHeight，当scrollTop + windowHeight等于docHeight时，就说明滚动条已经滚动到了底部。

最后，在事件中加入需要执行的代码即可。

比如，下面这个例子是判断滚动条是否滚动到了底部，并弹出“已经滚动到底部”的提示框。

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  var windowHeight = $(this).height();
  var docHeight = $(document).height();
  if (scrollTop + windowHeight == docHeight) {
    alert("已经滚动到底部！");
  }
});

方法二：监听滚动条触底事件

另一种常用的方法是通过监听滚动条触底事件来判断是否滚动到了页面底部。可以使用$(window).on('scrollReachBottom', handler)方法来监听滚动条触底事件。

比如，下面这个例子是通过监听滚动条触底事件来判断是否滚动到了底部，并弹出“已经滚动到底部”的提示框。

$(window).on('scrollReachBottom', function() {
  alert("已经滚动到底部！");
});

示例说明

示例一：通过滚动事件判断是否滚动到底部

下面是一个简单的例子，通过滚动事件判断是否滚动到了页面底部，并在滚动到底部时弹出一个提示框。

<!DOCTYPE html>
<html>
<head>
  <title>滚动条滚动到底部判断示例</title>
  <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
  <div style="height: 1000px;"></div>
  <script>
    $(window).scroll(function() {
      var scrollTop = $(this).scrollTop();
      var windowHeight = $(this).height();
      var docHeight = $(document).height();
      if (scrollTop + windowHeight == docHeight) {
        alert("已经滚动到底部！");
      }
    });
  </script>
</body>
</html>

在这个例子中，我先在页面中创建了一个高度为1000px的div元素，用于撑开页面高度。然后，我使用$(window).scroll()方法监听滚动事件，当滚动到底部时，弹出提示框。

示例二：通过滚动条触底事件判断是否滚动到底部

下面是另一个例子，通过监听滚动条触底事件来判断是否滚动到了页面底部，并在滚动到底部时弹出一个提示框。

<!DOCTYPE html>
<html>
<head>
  <title>滚动条滚动到底部判断示例</title>
  <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-scrollReveal/1.3.6/jquery.scrollReveal.min.js"></script>
</head>
<body>
  <div style="height: 1000px;"></div>
  <script>
    $(window).on('scrollReachBottom', function() {
      alert("已经滚动到底部！");
    });
  </script>
</body>
</html>

在这个例子中，我同样使用了一个高为1000px的div元素，然后我通过$(window).on('scrollReachBottom'， handler)方法监听滚动条触底事件，当触底时，弹出提示框。

需要注意的是，这个方法需要使用jquery-scrollReveal插件，请在头部的