Question

我有以下标记结构。

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

现在，课程content-wrapper设置为页面总客户区域的80%高度，并且overflow-y设置为auto以获得滚动条body不适合。请注意，内部div content可以是任意次。所以，问题是如何检查content-wrapper是否完全滚动？

提示：

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

Answer 1

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

希望它有所帮助。

Answer 2

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

如果有一些分数，我也会从滚动高度中减去几个像素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以执行以下操作：

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

检查元素是否完全滚动

提示：

3 个答案: