JS滚动时显示元素
本篇文章我们将实现文章平滑滑入
● 其实这原本是用CSS实现的
.section {padding: 15rem 3rem;border-top: 1px solid #ddd;transition: transform 1s, opacity 1s;
}.section--hidden {opacity: 0;transform: translateY(8rem);
}
● 我们的目的呢，就是当滚入到某一节中，将section–hidden给去除就可以了
● 首先，我们先获取想要的class，存储变量中
const allSections = document.querySelectorAll('.section');
● 之后，我们定义一个函数来处理观察者监听到变化的时候，我们应该干啥，就是移除掉section–hidden这个class
const revealSection = function (entries, observer) { //定义了一个叫做revealSection的函数，用来处理观察者（IntersectionObserver）监听到的变化。const [entry] = entries; // 从entries数组中取出第一个元素，并赋值给entry变量if (!entry.isIntersecting) return; //如果entry对象的isIntersecting属性为false（即元素没有进入视口），则直接返回，不执行后续操作。这个呢，是防止第一个参数，因为第一个参数会被直接定义，直接出现entry.target.classList.remove('section--hidden'); //从entry对象中获取目标元素（被观察的.section元素），然后移除它的section--hidden类名，从而使其显示出来。observer.unobserve(entry.target); //调用观察者对象的unobserve方法停止观察当前的目标元素，因为我们只需要元素进入视口时执行一次操作。
};
● 接着呢，我们需要定义对象来监视页面上所有的section的视口变化
const sectionObserver = new IntersectionObserver(revealSection, { //创建了一个新的IntersectionObserver对象，命名为sectionObserver，它用来监视页面上所有.section元素的可见性变化。revealSection是上面定义的处理函数，用来处理可见性变化时的具体操作。root: null, //指定根元素为null，即使用整个视窗作为根元素，如果要基于另一个元素的可见性来触发，可以在这里指定。threshold: 0.15, //指定触发回调的阈值，表示当.section元素的可见部分占视口的15%以上时，就触发回调函数
});
● 最后呢，我们对section元素进行迭代处理，默认情况是，这些元素是不可见的
allSections.forEach(function (section) {sectionObserver.observe(section); //将每个.section元素注册到sectionObserver观察者中，以便监视它们的可见性变化。section.classList.add('section--hidden'); //给每个.section元素添加section--hidden类名，使它们最初隐藏起来。
});
● 完整代码如下
//揭示内容
const allSections = document.querySelectorAll('.section');
const revealSection = function (entries, observer) {const [entry] = entries;if (!entry.isIntersecting) return;entry.target.classList.remove('section--hidden');observer.unobserve(entry.target);
};const sectionObserver = new IntersectionObserver(revealSection, {root: null,threshold: 0.15,
});allSections.forEach(function (section) {sectionObserver.observe(section);section.classList.add('section--hidden');
});
