滚动位置等于div内容高度时的jQuery警报[重复]

Question

我希望当div 的滚动位置等于div 内的内容高度时显示警报消息。我已经编写了一些 jQuery，并且相信我非常接近能够做到这一点。

但是缺少一些东西。忽略滚动条div，后面会用到。谢谢

$(document).ready(function() {

  var box1_height = $("#box1").height();
  var scroll_pos = $("#box1").scrollTop();

  if (box1_height == scroll_pos) {
    alert("It's working");
  }
});

* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
}

#background_1 {
  background-image: url("http://placehold.it/350x150");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.scroller {
  width: 100%;
  height: 100vh;
  overflow: scroll;
}

.content {
  width: 80%;
  height: 80vh;
  margin: 10vh auto;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: scroll;
  box-size: border-box;
}

<div id="background_1">
  <div class="scroller">
    <div id="box1" class="content">
      content is here
    </div>
  </div>
</div>

这是CodePen Link。

Answer 1

您需要执行以下操作才能检测到这一点：

var container = $("#box1")                      //Fetch the container element once, so we don't squander performance on re-fetches
var box1_height = container.height();           //Get the visible height of the container (not the actual height with scroll)
var scroll_height = container[0].scrollHeight;  //Get the content height of the container
var scroll_pos = container.scrollTop();         //Get the top location of the scrollbar in that container
if(scroll_height == box1_height + scroll_pos){  //Check if we're exactly at the bottom
    alert("It's working");
}

说明：

这是因为您知道滚动条的顶部值，但要检测您是否在容器底部，您实际上需要知道滚动条的底部值。这是通过以下方式实现的：

scroll_height == box1_height + scroll_pos