如何区分锚点链接触发的滚动与鼠标/滚动条原生滚动事件？

这个问题确实挺棘手的——浏览器原生的滚动事件确实不会直接告诉你触发源是锚点跳转还是用户手动滚动，但我们可以通过几个巧妙的标记技巧来区分二者，完美解决导航栏被误隐藏的问题。下面给你两个实用的方案：

方案一：监听锚点点击事件，设置临时标记 #

核心思路是：当用户点击锚点链接时，先设置一个“正在进行锚点滚动”的标记，在滚动结束后再重置这个标记。滚动事件触发时，先检查这个标记，再决定是否执行导航栏隐藏逻辑。

// 初始化标记：默认不是锚点触发的滚动
let isAnchorScroll = false;

// 监听页面中所有锚点链接的点击
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', () => {
    isAnchorScroll = true;
    
    // 用scrollend事件监听滚动结束，重置标记（现代浏览器支持）
    window.addEventListener('scrollend', () => {
      isAnchorScroll = false;
    }, { once: true }); // 只触发一次，避免内存泄漏
    
    // 兼容不支持scrollend的旧浏览器，用setTimeout兜底
    setTimeout(() => {
      isAnchorScroll = false;
    }, 1000); // 可根据页面滚动时长调整，一般1秒足够
  });
});

// 你的滚动事件处理逻辑
window.addEventListener('scroll', () => {
  // 如果是锚点触发的滚动，直接保持导航栏可见
  if (isAnchorScroll) {
    document.querySelector('.navbar').style.display = 'block';
    return;
  }
  
  // 下面是你原来的导航栏显示/隐藏逻辑（示例）
  const navbar = document.querySelector('.navbar');
  let lastScrollTop = 0;
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  if (currentScrollTop > lastScrollTop) {
    // 向下滚动：隐藏导航栏
    navbar.classList.add('hidden');
  } else {
    // 向上滚动：显示导航栏
    navbar.classList.remove('hidden');
  }
  lastScrollTop = currentScrollTop;
});

方案二：利用hashchange事件做标记 #

如果你的锚点跳转都会触发URL的hash变化（大部分情况都是如此），可以直接监听hashchange事件来设置标记，逻辑和方案一类似，但不需要单独监听锚点点击：

let isHashScroll = false;

window.addEventListener('hashchange', () => {
  isHashScroll = true;
  
  // 同样用scrollend和setTimeout组合重置标记
  window.addEventListener('scrollend', () => {
    isHashScroll = false;
  }, { once: true });
  
  setTimeout(() => {
    isHashScroll = false;
  }, 1000);
});

window.addEventListener('scroll', () => {
  if (isHashScroll) {
    document.querySelector('.navbar').style.display = 'block';
    return;
  }
  
  // 原来的滚动逻辑...
});

注意事项 #

1. scrollend兼容性：scrollend是比较新的API，Chrome 94+、Firefox 75+才支持，所以一定要配合setTimeout做兜底，确保旧浏览器也能正常工作。
2. 标记重置时机：如果你的页面滚动速度很慢（比如长页面、大量图片），可以适当延长setTimeout的时间，避免标记提前重置导致导航栏误隐藏。
3. JS触发的hash变化：如果有通过history.pushState或history.replaceState手动修改hash的场景，记得在对应的代码里也设置isAnchorScroll或isHashScroll标记。

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