我怎样才能让我的 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]);
    }
  }
}

我怎样才能让我的 Intersection Observer 只将 div 放在屏幕上一次，并且在用户滚动离开时不将其删除？

How can I make me Intersection Observer only put the div on the screen once and not remove it when the user scrolls away?

javascript

intersection-observer