[英]Intersection Observer not working below 600px viewport (+GSAP)
我的內容動畫有問題。 一切正常,但是當我制作響應式網站並使視口寬度低於 600 像素時,我的交叉點觀察器無法正常工作。 什么都沒發生。
當我滾動我的網站時,我將 console.log 添加到 IO 並且控制台中沒有顯示任何內容。 當我在寬度超過 600px 時滾動時,我可以在控制台中看到 IO。
也許有人知道這個問題的解決方案?
我的代碼:
//global
const slideDuration = 1;
// scroll animation
let target = document.querySelectorAll("section");
const options = {
root: null,
threshold: 0,
rootMargin: "-300px"
};
const contentAnimation = (left, right) => {
gsap
.timeline()
.from(right, { opacity: 0, duration: slideDuration, x: 400 })
.from(left, { opacity: 0, duration: slideDuration, x: -400 }, "-=0.5");
};
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
//show content
const getElement = entry.target.className;
const contentElement = document.querySelector(`.${getElement}__content`);
contentElement.style.opacity = "1";
//animation
const right = document.querySelectorAll(`.${entry.target.className}-right`);
const left = document.querySelectorAll(`.${entry.target.className}-left`);
contentAnimation(left, right);
io.unobserve(entry.target);
}
});
}, options);
target.forEach(section => {
io.observe(section);
});
你有rootMargin: "-300px"
。 這意味着直到你在任何一側 300px 時才會開始相交。 當視口小於 600px 時,沒有更多的元素與之相交,因此它不起作用。
有關更多信息,請參閱交叉點觀察者文檔。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.