Safari中Navbar滚动隐藏/显示异常：滚动至顶部误触发隐藏

这个问题我之前做滚动导航交互时也碰到过，确实和Safari的滚动特性有关——不是window.scrollY返回0本身的问题，而是Safari处理边界弹性滚动的逻辑和Chrome、Firefox不一样。

问题核心原因 #

Safari支持页面顶部的“橡皮筋弹性滚动”：当你已经滚动到页面最顶部，继续向上拖动页面时，浏览器会允许window.scrollY变成负数（比如-30、-80），松开后页面回弹，scrollY会从负数回到0。

如果你的Navbar逻辑是通过比较当前滚动位置和上一次滚动位置判断方向（比如currentScrollPos > prevScrollPos就隐藏），那么回弹时currentScrollPos（0）会大于之前的prevScrollPos（负数），代码会误判为“向下滚动”，从而触发隐藏Navbar的操作。而Chrome和Firefox在顶部边界不会让scrollY变成负数，所以不会出现这个误触发。

排查与解决方向 #

1. 添加顶部边界强制判断
   在滚动监听逻辑里，先判断当前是否处于页面顶部（currentScrollPos === 0），如果是直接强制显示Navbar，跳过后续方向判断：

   let prevScrollPos = window.scrollY;
   
   window.addEventListener('scroll', () => {
     const currentScrollPos = window.scrollY;
     
     // 处于页面顶部时，强制显示Navbar
     if (currentScrollPos === 0) {
       document.querySelector('.navbar').style.transform = 'translateY(0)';
       prevScrollPos = currentScrollPos;
       return;
     }
   
     if (currentScrollPos > prevScrollPos) {
       // 向下滚动：隐藏Navbar
       document.querySelector('.navbar').style.transform = 'translateY(-100%)';
     } else {
       // 向上滚动：显示Navbar
       document.querySelector('.navbar').style.transform = 'translateY(0)';
     }
     prevScrollPos = currentScrollPos;
   });
   

2. 忽略微小滚动偏移
   设置一个滚动阈值（比如20px），只有当滚动位置的变化超过阈值时才触发逻辑，避免弹性滚动的微小偏移误判：

   const SCROLL_THRESHOLD = 20;
   let prevScrollPos = window.scrollY;
   
   window.addEventListener('scroll', () => {
     const currentScrollPos = window.scrollY;
     const scrollDiff = Math.abs(currentScrollPos - prevScrollPos);
   
     // 滚动变化太小时，不执行任何操作
     if (scrollDiff < SCROLL_THRESHOLD) return;
   
     // 后续的显示/隐藏逻辑...
     prevScrollPos = currentScrollPos;
   });
   

3. 打印滚动值验证规律
   可以在滚动事件里打印currentScrollPos和prevScrollPos的实时值，观察Safari下的变化规律，确认是不是弹性滚动导致的负数偏移触发了误判。

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