web-dev-qa-db-ja.com

IntersectionObserver iOS＆Safari

私の目標は、ユーザーがビデオ要素までさらにスクロールした場合に、位置をビデオ要素に変更することです。 AdForm Banner/iFrameからのページスクロールを処理する必要があるため、Intersection ObserverAPIを使用しています。

これが私のコードです：

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では一般的に機能しないため、リスナーが検出されないようです。

誰かが私を助けることができますか？前もって感謝します。

javascripthtmlscrollbannerintersection-observer
6
alex18min

iOS 12.2 の時点で、Intersection ObserverAPIはSafariでネイティブにサポートされています。

また、その時点でツールバーを考慮に入れて、「実際の」可視ビューポートを尊重していることを確認できてうれしいです。

したがって、上下にスクロールすると、ページの下部にあるツールバーが表示または非表示になります。これが、計算用の新しいビューポートの高さです。

2
Simon_Weaver