如何区分浏览器刷新后的自动滚动与用户手动滚动？

这问题我之前帮不少开发者解决过，确实挺头疼的——浏览器自带的刷新后自动回滚会干扰滚动事件的监听逻辑，尤其是你这种靠滚动追踪用户进度的场景。下面分享几个实用的方案，亲测在主流浏览器里都能正常工作：

方案一：利用页面导航类型标记 + 延迟取消标记 #

这是最直接有效的方法，核心思路是先判断页面是否是刷新加载，然后给自动滚动阶段打标记，等浏览器完成自动滚动后再解除标记，这样就能在滚动监听里区分两种场景：

1. 初始化时标记刷新场景
   首先通过浏览器的performance API判断页面加载类型，标记是否处于刷新后的自动滚动阶段：

   let isAutoScrollAfterReload = false;
   // 获取导航记录，兼容现代浏览器（替代已废弃的performance.navigation.type）
   const navigationEntry = performance.getEntriesByType('navigation')[0];
   
   if (navigationEntry?.type === 'reload') {
     isAutoScrollAfterReload = true;
     // 延迟一段时间，等浏览器完成自动滚动后关闭标记
     // 时间可根据实际情况调整，100-200ms足够覆盖主流浏览器的自动滚动耗时
     setTimeout(() => {
       isAutoScrollAfterReload = false;
     }, 150);
   }
   

2. 在滚动监听中过滤自动滚动
   之后在你的scroll监听函数里，先检查标记，跳过自动滚动触发的逻辑：

   $(window).scroll(() => {
     if (isAutoScrollAfterReload) {
       // 属于浏览器刷新后的自动滚动，跳过进度追踪逻辑
       return;
     }
     // 这里执行用户手动滚动时的检查点逻辑
     // 比如你的进度追踪、检查点触发代码...
   });
   

方案二：结合滚动位置变化与用户交互标记（更精准） #

如果担心延迟时间设置不准，还可以结合用户交互事件（鼠标点击、键盘操作等）来进一步区分：

• 初始化时设置isUserInitiatedScroll = false
• 监听mousedown、keydown、touchstart等用户交互事件，触发时将isUserInitiatedScroll设为true
• 在滚动监听里，只有当isUserInitiatedScroll为true时，才执行你的进度追踪逻辑

这个方法能彻底区分“浏览器自动触发的滚动”和“用户主动触发的滚动”，但需要多监听几个交互事件，代码量稍大。

额外注意事项 #

• 如果你需要处理浏览器前进/后退时的自动滚动，只需要在判断导航类型时加上navigationEntry.type === 'back_forward'即可
• 不同浏览器的自动滚动时机略有差异，测试时可以调整setTimeout的延迟时间，确保覆盖所有情况

内容的提问来源于stack exchange，提问作者Thiago Melo