如何解决Chrome、Safari滚动回弹触发navbar错误显隐的问题

你遇到的问题是WebKit/Blink内核浏览器（Chrome、Safari、Edge等）默认的橡皮筋回弹效果导致的：当页面滚动到顶部或底部边界时，沿该方向继续滑动，浏览器会将页面拉出一段空白缓冲，松手后回弹复位。这段回弹过程会触发滚动事件，且滚动偏移量会出现临时的微小反向波动，你的原始逻辑只单纯对比前后两次滚动偏移量判断方向，没有过滤这类边界异常波动，就会出现误判。
Firefox默认没有开启页面边缘回弹效果，所以不会触发该问题。

推荐采用边界缓冲区+滚动阈值的逻辑优化方案，不会影响原生滚动体验，适配性更好：

优化后JS代码 #

// 初始化滚动变量
let prevScrollPos = window.pageYOffset;
let maxScrollY = document.body.scrollHeight - window.innerHeight;
// 可自定义阈值：边界缓冲范围/最小滚动判定距离
const BOUNDARY_BUFFER = 10;
const MIN_SCROLL_DELTA = 2;

// 页面尺寸变化时更新最大可滚动高度
function updateMaxScrollHeight() {
  maxScrollY = document.body.scrollHeight - window.innerHeight;
}
window.addEventListener('resize', updateMaxScrollHeight);

window.onscroll = function() {
  const currentScrollPos = window.pageYOffset;
  // 1. 滚动到顶部缓冲区：强制显示导航栏，跳过方向判断
  if (currentScrollPos <= BOUNDARY_BUFFER) {
    document.getElementById("fader").style.top = "0";
    prevScrollPos = currentScrollPos;
    return;
  }
  // 2. 滚动到底部缓冲区：跳过方向判断，过滤回弹波动
  if (currentScrollPos >= maxScrollY - BOUNDARY_BUFFER) {
    prevScrollPos = currentScrollPos;
    return;
  }
  // 3. 滚动距离小于阈值：视为抖动/回弹，不触发显隐逻辑
  if (Math.abs(currentScrollPos - prevScrollPos) < MIN_SCROLL_DELTA) {
    return;
  }
  // 4. 正常滚动区域执行原有显隐逻辑
  if (prevScrollPos > currentScrollPos) {
    document.getElementById("fader").style.top = "0";
  } else {
    document.getElementById("fader").style.top = "-100%";
  }
  prevScrollPos = currentScrollPos;
}

逻辑说明 #

• 边界缓冲区：设置10px的缓冲范围，只要滚动位置距离顶部/底部小于该值，就判定为处于回弹高风险区。顶部区域直接固定显示导航栏，符合绝大多数交互习惯；底部区域跳过方向判断，避免回弹的微小反向位移导致误判。
• 最小滚动阈值：只有前后两次滚动偏移差超过2px时才判定为有效滚动，过滤掉回弹、页面抖动产生的无效微小位移，进一步降低误判概率。
• 动态更新最大滚动高度：监听窗口resize事件，页面尺寸变化、内容异步加载时也能保证底部边界判断的准确性。

可选简化方案（不推荐） #

如果不需要保留原生回弹效果，可以直接用CSS全局禁用页面边缘回弹，不需要修改JS逻辑：

html, body {
  overscroll-behavior: none;
  height: 100%;
  overflow: auto;
}

该方案会取消所有页面边缘的回弹效果，会降低原生滚动体验，仅适合不需要回弹效果的场景使用。

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