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

Question

我有以下标记结构。

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

现在，类content-wrapper被设置为只有80%页面总客户区的高度，并且在其主体不适合时overflow-y设置为具有滚动条。请注意，内部 div可以是任意次数。那么，问题是如何检查是否完全滚动？autocontentcontent-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>

Answer 2

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

希望能帮助到你。

Answer 3

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

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

Answer 4

您可以执行以下操作：

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