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.

Here is my code:

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

Here is the handleIntersect function:

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

Here is my codepen:

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.

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.

Here is my code:

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

Here is the handleIntersect function:

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

Here is my codepen: https://codepen.io/alex18min/pen/gXXYJb

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.

• javascript
• html
• scroll
• banner
• intersection-observer

• 3 IntersectionObserver is simply not natively supported on Safari, iOS Safari, IE11. You'd need to use a polyfill to support this functionality in those browsers. You'd want to load this polyfill prior to any intersection observer functionality. – Alexander Staroselsky Commented Nov 16, 2017 at 19:37
• I've already declared the polyfill in the head, like this: <script src="polyfill.io/v2/…> this is the first script of the page, but still not working. Am i wrong in the declaration? – alex18min Commented Nov 17, 2017 at 8:37
• 2 Tried your polyfill url on my browser that didn't work. Instead you can include the file manually. – bob Commented Nov 28, 2017 at 21:36
• 1 The bigger problem is that the polygoll doesn't adjust for a change in virwport size due to auto hiding toolbars when you scroll. As such items will be about 70 pixels into the bottom of the virwport before they are even detected at 0% – Simon_Weaver Commented Jun 10, 2018 at 20:37

1 Answer 1

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 es into view or hides- that's your new viewport height for calculations.