← 返回目录

14. 滚动事件与滚动控制

滚动分两种：被动听（你滚，我用 scrollTop 知道你滚了多远）和主动控（我用 scrollTo/scrollBy 让它自己滚到指定位置）。注意 scroll 一秒能触发几十上百次，别在里面干重活，否则会卡。

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

14.2 知识点逐条讲解

① 听滚动、读距离

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

② 主动控滚动

box.scrollTo(0, 0);                          // 瞬间回顶部
box.scrollTo({ top: 500, behavior: 'smooth' }); // 平滑滚到 500
box.scrollBy(0, 80);                         // 在当前位置再往下 80
lineLast.scrollIntoView({ behavior: 'smooth', block: 'center' }); // 让某行进视野
	

③ 性能：scroll 触发太勤

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

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

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

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

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