导航锚点失效问题：添加滚动监听后非Safari浏览器异常

问题背景 #

原有导航栏可在对应标题进入视口时自动切换Bootstrap类，功能正常。为第二个导航栏navbar2添加滚动事件监听后，锚点链接在除Safari外的浏览器失效，调试时出现错误：

DOMException: Failed to execute 'querySelectorAll' on 'Element': '' is not a valid selector

已尝试合并滚动监听函数，控制台无报错，但仍未实现「标题进入视口时，导航滚动到对应项并切换Badge类」的需求。

问题定位 #

该错误源于调用querySelectorAll时传入了空字符串选择器，通常是处理导航项或标题元素时，锚点ID未正确赋值（比如导航链接的href为空，或标题元素无有效ID）。锚点失效则大概率是滚动监听逻辑干扰了浏览器默认锚点跳转行为。

修复方案 #

1. 校验选择器参数，避免空值调用 #

在所有使用querySelector/querySelectorAll的位置，先校验选择器字符串是否有效，跳过空锚点的导航链接：

// 遍历导航链接时先过滤空锚点
document.querySelectorAll('.navbar-nav a').forEach(link => {
  const targetHref = link.getAttribute('href');
  // 跳过非锚点链接和空锚点
  if (!targetHref || !targetHref.startsWith('#')) return;
  
  const targetId = targetHref.slice(1);
  const targetElement = document.getElementById(targetId);
  if (!targetElement) return; // 跳过无对应元素的锚点
  
  // 后续逻辑处理
});

2. 统一滚动监听逻辑，同时处理两个导航栏 #

合并后的滚动监听函数需同时处理两个导航栏，确保视口判断、类切换和导航滚动逻辑正确：

window.addEventListener('scroll', () => {
  // 获取所有带ID的标题元素，确保选择器有效
  const sections = document.querySelectorAll('section[id]');
  if (!sections.length) return;

  sections.forEach(section => {
    const rect = section.getBoundingClientRect();
    // 自定义视口阈值，可根据需求调整
    const isInView = rect.top <= 100 && rect.bottom >= 100;
    const sectionId = section.getAttribute('id');
    if (!sectionId) return;

    // 处理第一个导航栏的类切换
    const navLink1 = document.querySelector(`.navbar1 a[href="#${sectionId}"]`);
    if (navLink1) {
      navLink1.classList.toggle('active', isInView);
      navLink1.querySelector('.badge')?.classList.toggle('bg-primary', isInView);
    }

    // 处理第二个导航栏navbar2的类切换与滚动定位
    const navLink2 = document.querySelector(`.navbar2 a[href="#${sectionId}"]`);
    if (navLink2) {
      navLink2.classList.toggle('active', isInView);
      navLink2.querySelector('.badge')?.classList.toggle('bg-primary', isInView);

      // 当标题进入视口时，滚动导航到对应项
      if (isInView) {
        navLink2.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    }
  });
});

3. 修复锚点链接失效问题 #

避免滚动监听干扰默认跳转，单独处理锚点点击的平滑滚动：

document.querySelectorAll('.navbar1 a, .navbar2 a').forEach(link => {
  link.addEventListener('click', (e) => {
    const targetHref = link.getAttribute('href');
    if (!targetHref || !targetHref.startsWith('#')) return;

    const targetId = targetHref.slice(1);
    const targetElement = document.getElementById(targetId);
    if (!targetElement) return;

    // 阻止默认跳转，用平滑滚动替代
    e.preventDefault();
    targetElement.scrollIntoView({ behavior: 'smooth' });

    // 手动激活当前导航项，同步更新Badge类
    document.querySelectorAll('.navbar1 a.active, .navbar2 a.active').forEach(el => {
      el.classList.remove('active');
      el.querySelector('.badge')?.classList.remove('bg-primary');
    });
    link.classList.add('active');
    link.querySelector('.badge')?.classList.add('bg-primary');
  });
});

4. 适配Safari浏览器 #

Safari对部分API支持有差异，调整视口判断和滚动参数：

// 适配Safari的视口判断逻辑
const isInView = rect.top <= window.innerHeight * 0.5 && rect.bottom >= 0;

// 滚动导航项时使用Safari兼容的参数
navLink2?.scrollIntoView({ behavior: 'auto', block: 'nearest' });

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