检查元素是否完全滚动

Question

我有以下标记结构。

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

现在，类content-wrapper被设置为只有80%页面总客户区的高度，并且在它的主体不适合时overflow-y设置auto有一个滚动条。请注意，内部 divcontent可以是任意次数。所以，问题是如何检查是否content-wrapper完全滚动？

暗示：

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

Answer 1

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

此外，我会从滚动高度中减去一些像素，以处理一些分数。

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;
}