jquery - 检查元素是否完全滚动

Question

我有以下标记结构。

<div class="content-wrapper">
    <div class="content">...</div>
    <div class="content">...</div>
    <div class="content">...</div>
</div>

现在，content-wrapper 类设置为仅具有页面总客户区域的 80% 高度，并且具有 overflow-y > 设置为 auto 以便在主体不适合时显示滚动条。请注意，内部 div content 可以出现任意次数。所以，问题是如何检查content-wrapper是否完全滚动？

提示:

想象一个动态加载的新闻源，当容器完全滚动时，新内容将被自动获取并附加到容器的主体中。

Answer 1

var isFullyScrolled = this.scrollTop + this.clientHeight >= this.scrollHeight;

此外，对于带有一些分数的情况，我会从滚动高度中减去一些像素。

document.querySelector('section').addEventListener('scroll', function (e) {
  var isFullyScrolled = this.scrollTop + this.clientHeight >= this.scrollHeight;
  document.querySelector('output').textContent = isFullyScrolled;
});

html, body, section {
  height: 100%;
  margin: 0;
}

section {
  overflow: auto;
}

div {
  height: 40%;
}

div:nth-child(even) {
  background: silver;
}

output {
  position: absolute;
  left: 8px;
  top: 8px;
  color: red;
  font-family: monospace;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<output>Scroll</output>