检查元素是否完全滚动答案

【问题标题】：Check if element is fully scrolled检查元素是否完全滚动
【发布时间】：2012-10-24 11:02:40
【问题描述】：

我有以下标记结构。

<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 是否完全滚动？

提示：

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

【问题讨论】：

也许是时候接受答案了？

标签： jquery web-applications mouseevent

【解决方案1】：

如果您想确定元素是否在其宽度（x轴）上完全滚动，方法如下：

const scrolledElement = document.getElementById(ELEMENT_ID);
const isElementFullyScrolled = scrolledElement.scrollWidth - scrolledElement.scrollLeft === scrolledElement.clientWidth;

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

你可以这样做：

var top = $('.content-wrapper').scrollTop();
var height = $('.content-wrapper').height();
if(top==height) {
//load more data
}

【讨论】：

没有帮助。 :/ 注意内部content div 的数量和大小各不相同。
然后贴一些小提琴让它玩。

【解决方案4】：

您可以尝试在末尾添加一个没有内容的 div，只需给它一些高度。并检查该 div 是否在视口中。如果是，则表示您已到达卷轴的末尾。这是一个很棒的 jQuery 插件，用于检查元素是否在视图中。 http://remysharp.com/2009/01/26/element-in-view-event-plugin/

希望对你有帮助。

【讨论】：