14. 滚动事件与滚动控制

滚动事件就是页面或元素滚动时触发，常用于回到顶部、滚动加载。

核心三个：
① onscroll——滚动时触发
② scrollTop——滚动了多少
③ scrollHeight / clientHeight——总高度 / 可视高度

坑：scroll 事件频繁触发要防抖、回到顶部用 scrollTo(0,0)、判断滚动到底用 scrollTop + clientHeight >= scrollHeight。

14.1 互动演示（滚这个盒子，再用按钮控它）

滚盒子读 scrollTop； 点按钮主动滚。 下面同步代码与距离。

14.2 知识点逐条讲解

① 听滚动、读距离

// 这个盒子一被滚动就跑
box.addEventListener('scroll', function () {
  // scrollTop 读出已往下滚了多少
  console.log('已滚：' + box.scrollTop);
});

② 主动控滚动

// 瞬间回顶部
box.scrollTo(0, 0);

// 平滑滚到 500
box.scrollTo({ top: 500, behavior: 'smooth' });

// 在当前位置再往下 80
box.scrollBy(0, 80);

// 让某行进视野
lineLast.scrollIntoView({ behavior: 'smooth', block: 'center' });

③ 性能：scroll 触发太勤

如果你在 scroll 回调里发请求、改一大堆 DOM，页面就会卡。因为 scroll 一秒能触发几十上百次；解决办法是"防抖/节流"——让频繁触发合并成一次再跑，这个在性能章节细讲，先有这个意识。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：回到顶部按钮、吸顶导航、消息列表滚到最新。

② 常见坑：scroll 回调里干重活导致卡顿；滚错了对象。

③ 怎么解决：用 scrollTo/scrollIntoView 主动滚；高频事件配合防抖，先确认读的是哪个元素。

本页重点