滚动监听可通过scroll事件或Intersection Observer API实现；前者直接但易卡顿，需节流优化，后者异步高效，更推荐用于元素可见性检测。
滚动监听，说白了，就是让我们的网页能够“感知”用户的滚动行为。核心在于，当用户滚动页面时，我们能实时知道某个元素是否进入或离开了可视区域，或者当前滚动位置在哪里，从而触发相应的交互或样式变化。它就像是给页面装上了眼睛和耳朵，能根据用户的“动作”做出反馈。
要实现滚动监听，从技术实现上讲，主要有两种主流方式：一种是基于传统的
scroll事件，另一种则是更现代、性能更好的
Intersection ObserverAPI。
基于scroll
事件的实现
这是最直观也最容易想到的方法。我们可以在
window对象或者某个可滚动容器上监听
scroll事件。每当用户滚动时，这个事件就会被触发。在事件回调函数里，我们可以获取当前滚动位置（
window.scrollY或
element.scrollTop），或者通过
element.getBoundingClientRect()方法来获取元素相对于视口的位置信息，然后根据这些信息来判断元素是否可见或者处于某个特定位置。
举个例子，如果你想知道一个元素A是否进入了视口：
window.addEventListener('scroll', () => {
const elementA = document.getElementById('elementA');
if (elementA) {
const rect = elementA.getBoundingClientRect();
// 判断元素顶部是否进入视口，并且底部还在视口内
const isVisible = (rect.top < window.innerHeight && rect.bottom >= 0);
if (isVisible) {
console.log('元素A进入了视口！');
// 这里可以触发动画、加载内容等
} else {
console.log('元素A离开了视口。');
}
}
});这种方式虽然直接，但有一个明显的缺点：
scroll事件触发频率非常高。如果在回调函数里执行了复杂的DOM操作或者计算，很容易造成页面卡顿，影响用户体验。所以，如果选择这种方式，节流（throttle）或防抖（debounce）是必不可少的优化手段。
使用Intersection Observer
API
这是我个人更推荐的方式，尤其当你主要关心的是“元素是否进入/离开视口”这种场景时。
Intersection Observer是一个异步API，它不会在主线程上执行繁重的计算，而是由浏览器在合适的时机通知你被观察元素与根元素（通常是视口）的交叉状态。这大大提升了性能，并且API本身也更加简洁明了。
它的基本用法是创建一个
IntersectionObserver实例，传入一个回调函数和一些选项（如
root、
rootMargin、
threshold），然后用这个实例去观察一个或多个目标元素。
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log(`${entry.target.id} 进入了视口！`);
// 元素进入视口时执行的操作，比如加载图片、播放动画
// 如果只需要监听一次，可以在这里停止观察
// observer.unobserve(entry.target);
} else {
console.log(`${entry.target.id} 离开了视口。`);
// 元素离开视口时执行的操作
}
});
}, {
// options
root: null, // 默认为浏览器视口
rootMargin: '0px', // 根元素的外边距，可以用来提前或延迟触发
threshold: 0.1 // 目标元素可见比例达到10%时触发回调
});
// 假设我们有一个ID为'mySection'的元素需要监听
const targetElement = document.getElementById('mySection');
if (targetElement) {
observer.observe(targetElement);
}在我看来，
Intersection Observer在大多数需要判断元素可见性的场景下，都是比
scroll事件更优雅、性能更优的选择。它将复杂的交叉判断逻辑交给了浏览器底层处理，开发者只需要关注业务逻辑即可。
scroll
事件与 Intersection Observer
，我该如何选择？
这确实是开发者在实现滚动监听时常会遇到的一个纠结。我的经验
