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之间

问题方案：页眉+主要内容+页脚，将数据动态附加到主要内容div。重要的是主要内容div是not overflow scroll，我想在窗口滚动到maincontent 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>

滚动到div的末尾时触发事件

1 个答案: