滚动到div末尾时触发事件

Question

我正在使用无限滚动，将数据动态绑定到特定的div。在 div 结束时触发事件并将数据附加到 div。最初在 div 末尾触发事件，但即使在附加数据之后，事件也会在第一个实例触发。如何在current instance of the div中触发事件

<script>
  var div = document.getElementById("myDiv");
  var top = div.getBoundingClientRect().top;
  var bottom = div.getBoundingClientRect().bottom;

  if (top <= window.innerHeight && bottom >= 0) {
     console.log("Reach Div End");
  }
</script>

注意：页面包含页眉和页脚。工作 div 介于页眉和页脚 div 之间

问题场景：header+main content+footer，动态追加数据到main content div。重要的是主要内容 div 是not overflow scroll，我想在窗口滚动到达主要内容 div 的末尾时触发事件。从上面的例子来看，top 和 bottom 变量保留了第一个实例的高度，但在内容绑定到主要内容后它不会刷新，所以它每次都会在第一个实例中触发事件

Answer 1

您应该查看Intersection Observer (IO)，而不是监听滚动事件，使用 IO，您可以对元素何时进入视图（或即将进入视图）/离开视图做出反应。 Smashing Magazine also has a great article 关于它，很棒的图片可以帮助您理解它。

您可以按照以下方式解决您的问题：您在内容的末尾添加一个可观察的 div，并且每当该 div 即将进入视图时，您会加载更多数据以附加到该 div。

这里是a tutorial on how you can do this。请记住，您不必像示例中那样显示“加载”文本，这只是为了让您了解发生了什么。

归结为以下几点：

首先你为你的 IO 定义选项：

let options = {
  rootMargin: '50px'
}
let observer = new IntersectionObserver(callback, options);

然后你必须定义你想观察哪个元素的交叉点：

let entries = document.querySelectorAll('.load-more-content'); // example for observing more elements, you can also observe just one.
entries.forEach(entry => {observer.observe(entry);}) // if you observe one, you don't need the forEach part.

最后你需要定义回调函数，一旦观察到的元素进入视野应该发生什么：

const observer = new IntersectionObserver(function (entries, self) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // load more content
    }
  });
}, config);

一个简单的例子，每当您滚动到内容 div 的底部时，都会附加另一个 div。此示例中不涉及 ajax，一旦您的 ajax 调用没有要附加的数据，您可能需要unobserve the IO。

对所有主流浏览器都有很好的支持，如果您需要支持 IE，可以使用polyfill from w3c。

const loadMore = document.querySelector('.load-more-content');
const config = {
  rootMargin: '50px',
  threshold: [.2, .9]
};

const observer = new IntersectionObserver(function (entries, self) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      var content = document.querySelector('.my-content');
      content.innerHTML = content.innerHTML + '<div class="my-content"> More was "loaded"</div>';
    }
  });
}, config);


observer.observe(loadMore);

header,
footer {
  height: 10vh;
  background: pink;
}

.wrapper {
  height: 80vh;
  overflow: auto;
}

.my-content {
  min-height: 150vh;
}

<header> Some content </header>
<div class="wrapper">
  <div class="my-content">
    <p> Lorem Ipsum </p>
  </div>
  <div class="load-more-content">
    <!-- Whenever this div comes into view, we load more -->
  </div>
</div>
<footer>Content </footer>