问题
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.
回答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 comes into view or hides- that's your new viewport height for calculations.
来源:https://stackoverflow.com/questions/47336881/intersectionobserver-ios-safari