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

}

标签： javascriptintersection-observer

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