如何实现滚动监听

滚动监听可通过scroll事件或Intersection Observer API实现；前者直接但易卡顿，需节流优化，后者异步高效，更推荐用于元素可见性检测。

滚动监听，说白了，就是让我们的网页能够“感知”用户的滚动行为。核心在于，当用户滚动页面时，我们能实时知道某个元素是否进入或离开了可视区域，或者当前滚动位置在哪里，从而触发相应的交互或样式变化。它就像是给页面装上了眼睛和耳朵，能根据用户的“动作”做出反馈。

要实现滚动监听，从技术实现上讲，主要有两种主流方式：一种是基于传统的

scroll

Intersection Observer

基于

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

云模块网站管理系统3.1.03

云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言，搭载自主研发的模块化引擎驱动技术，实现可视化拖拽无技术创建并管理网站！如你所想，无限可能，支持创建任何网站：企业、商城、O2O、门户、论坛、人才等一块儿搞定！永久免费授权，包括商业用途； 默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..

下载

使用

Intersection Observer

这是我个人更推荐的方式，尤其当你主要关心的是“元素是否进入/离开视口”这种场景时。

Intersection Observer

它的基本用法是创建一个

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

，我该如何选择？

这确实是开发者在实现滚动监听时常会遇到的一个纠结。我的经验