IntersectionObserver iOS &苹果浏览器 [英] IntersectionObserver iOS & Safari

问题描述

我的目标是在用户进一步滚动到视频元素时将位置更改为视频元素.我正在使用 Intersection Observer API，因为我需要处理来自 AdForm Banner/iFrame 的页面滚动.

My goal is to change position to a video element if the user scrolls further to the video element. I'm using Intersection Observer API because I need to handle the page scroll from an AdForm Banner/iFrame.

这是我的代码:

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

这是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"; 
    }
  });
}

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

它在 Chrome/Firefox/Edge 和 Android 设备上完美运行，但在 iOS 和 Safari 上一般不适用，似乎未检测到侦听器.

It works perfectly on Chrome/Firefox/Edge and Android devices, but not on iOS and Safari in general, it seems like the listener is not detected.

有人可以帮我吗?提前致谢.

Can someone help me? Thank you in advance.

推荐答案

截至 iOS 12.2 Safari 原生支持 Intersection Observer API.

As of iOS 12.2 the Intersection Observer API is natively supported in Safari.

我也很高兴地确认它尊重实际"可见视口 - 考虑到当时的工具栏.

I'm also happy to confirm that it respects the 'actual' visibile viewport - taking toolbars into account at that moment in time.

因此，当您上下滚动时，页面底部的工具栏会出现或隐藏 - 这就是您用于计算的新视口高度.

So as you scroll up and down and the toolbar at the bottom of the page comes into view or hides- that's your new viewport height for calculations.

这篇关于IntersectionObserver iOS &苹果浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！