我的内容动画有问题。一切工作正常,但是当我制作响应式网站并将视口(viewport)宽度设置为低于 600px 时,我的路口观察器无法工作。什么都没发生。
我将 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”
。这意味着只有在任意一侧距离为 300 像素时才会开始相交。当视口(viewport)小于 600px 时,没有更多的元素可以相交,因此它不起作用。
参见the intersection observer docs了解更多信息。
关于javascript - 交叉口观察器在 600 像素视口(viewport) (+GSAP) 以下无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60976961/