一、 元素滚动事件 (scroll)#

1. 什么是滚动事件？ 当用户滚动页面或某个容器时触发。千万注意：只有当内容超出容器高度，出现滚动条时，滚动事件才有意义。

2. 核心语法

1
// 1. 监听整个页面的滚动 (最常用)
2
window.addEventListener('scroll', function() {
3
    // 获取页面滚动了多少距离 (HTML文档向上卷去了多少)
4
    const n = document.documentElement.scrollTop
5
    console.log('页面滚走了：', n)
6
})
7

8
// 2. 监听某个具体盒子的滚动
9
const box = document.querySelector('.box')
10
box.addEventListener('scroll', function() {
11
    console.log('盒子内部滚走了：', box.scrollTop)
12
})

二、 三大家族属性对比表 (Client / Offset / Scroll)#

这三大系列属性通常都是 只读 的（不能通过赋值来修改它们，除了 scrollTop/scrollLeft 是可写的）。

三、 属性详细图解与场景#

为了方便记忆，你可以这样理解它们的用途：

四、 快速记忆口诀#

• offset (偏移/占位)：连皮带肉（这种最粗糙，连边框都算进去，用来算位置）。
• client (客户端/可视)：去皮留肉（不要边框，只要里面能看的地方）。
• scroll (滚动)：虽然卷起来了，但依然是我的肉（包括看不见的溢出内容）。

五、 页面尺寸事件 (resize)#

最后补充一下你提到的页面尺寸事件：

1
// 当浏览器窗口大小发生变化时触发
2
window.addEventListener('resize', function() {
3
    // 配合 clientWidth 获取当前屏幕宽度
4
    let w = document.documentElement.clientWidth
5
    console.log('当前屏幕宽度变为：', w)
6
})

这通常用来做移动端适配（rem布局）或响应式布局的JS处理。