小编ale*_*min的帖子

IntersectionObserver iOS和Safari

我的目标是如果用户进一步滚动到视频元素,则将位置更改为视频元素。我使用的是Intersection Observer API,因为我需要处理AdForm Banner / iFrame中的页面滚动。

这是我的代码:

function createObserver() {
  var observer;
  var options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  }; 
  observer = new IntersectionObserver(handleIntersect, options); 
  observer.observe(boxElement);
}
Run Code Online (Sandbox Code Playgroud)

这是handleIntersect函数:

function handleIntersect(entries, observer) { 
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > prevRatio) {
      console.log("VIDEO IN");
      p.style.position = "relative";
    } else if(entry.intersectionRatio === 0 && scrolled === 1 ) {
      console.log("VIDEO OUT");
      p.style.position = "fixed"; 
    }
  });
}
Run Code Online (Sandbox Code Playgroud)

这是我的代码笔:https ://codepen.io/alex18min/pen/gXXYJb

它可以在Chrome / Firefox / Edge和Android设备上完美运行,但通常不能在iOS和Safari上运行,似乎未检测到监听器。

有人能帮我吗?先感谢您。

html javascript scroll banner intersection-observer

5
推荐指数
1
解决办法
7242
查看次数

标签 统计

banner ×1

html ×1

intersection-observer ×1

javascript ×1

scroll ×1