javascript - 如何让 Intersection Observer 只将 div 放在屏幕上一次，并且在用户滚动离开时不将其删除？

Question

我正在将广告延迟加载到我的网站中，只有当用户向下滚动足够远时我才能让它显示，但当用户向后滚动时，div 就会消失。我希望这样当用户第一次看到 div 时，广告就会出现并停留在那里，即使他滚动离开。我也不希望广告让人耳目一新。我的代码是:

export const handleAds = () => {

  var myAds;

  window.addEventListener("load", function(event){
    myAds = document.querySelector("#theDiv");
    createObserver();
  },false);

  function createObserver(){
    var observer;

    var options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.2
    };

    observer = new IntersectionObserver(handleIntersect, options);
    observer.observe(myAds);

  }


  function handleIntersect(entries,observer){

    for (var i = 0; i < entries.length; i++){
      if(entries[i].isIntersecting){
        //ad script
        }
      }
    }

}

Answer 1

在回调中调用unobserve: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve

function handleIntersect(entries,observer){

  for (var i = 0; i < entries.length; i++){
    if(entries[i].isIntersecting){
      //ad script
      observer.unobserve(entries[i]);
    }
  }
}