当为导航栏添加滚动监听逻辑后，锚点链接（<a href="#section">）在 chrome、firefox 等浏览器中失效，而 safari 正常——根本原因是多个 scroll 事件监听器竞争执行、dom 查询空字符串 selector（如 queryselector('.badge[href="#"]')）引发异常，导致默认跳转行为被意外阻断。
当为导航栏添加滚动监听逻辑后，锚点链接（<a href="#section">）在 chrome、firefox 等浏览器中失效，而 safari 正常——根本原因是多个 scroll 事件监听器竞争执行、dom 查询空字符串 selector（如 queryselector('.badge[href="#"]')）引发异常，导致默认跳转行为被意外阻断。
在构建单页长内容导航（如餐厅菜单分类栏）时，常需实现两项核心交互：
- 点击锚点自动滚动到对应 <h3 id="..."> 区域（原生语义行为）；
- 滚动过程中动态高亮当前可见分类的导航 Badge，并智能居中显示该 Badge。
但若将上述逻辑拆分为多个独立的 window.addEventListener('scroll', ...)，极易引发以下问题：
- 多次遍历 sectionHeadings 和 badgeItems，性能冗余；
- 某次循环中 heading.getAttribute('id') 返回 null 或空字符串，导致 document.querySelector(...) 抛出 DOMException: '' is not a valid selector；
- 浏览器对 scroll 事件的节流策略差异（如 Safari 更宽松），掩盖了该错误，造成“仅部分浏览器失效”的假象；
- 更关键的是：未显式调用 event.preventDefault() 的锚点点击本应正常触发，但一旦 JS 执行抛出未捕获异常，后续事件队列可能中断，间接干扰原生跳转流程。
✅ 正确解法是：合并所有滚动相关逻辑至单一、健壮的事件处理器，并严格校验 DOM 元素有效性。
✅ 推荐解决方案：单函数统一处理滚动状态
以下代码整合了高亮更新、导航自动居中、且完全兼容原生锚点跳转：
<script>
// 1. 预先获取关键元素（避免重复查询）
const badgeItems = document.querySelectorAll('.secondnavbar .außen .item');
const sectionHeadings = document.querySelectorAll('h3[id]');
const scrollContainer = document.querySelector('.scroll-container');
// 2. 核心滚动处理器 —— 单一入口，无副作用
const handleScroll = () => {
const scrollTop = window.scrollY;
let activeIndex = -1;
// 从底部向上查找首个进入视口的标题（确保“当前区域”语义准确）
for (let i = sectionHeadings.length - 1; i >= 0; i--) {
const heading = sectionHeadings[i];
const rect = heading.getBoundingClientRect();
// 使用 getBoundingClientRect() 更可靠：top < innerHeight 表示顶部已进入视口
if (rect.top < window.innerHeight && rect.bottom > 0) {
activeIndex = i;
break;
}
}
// 3. 同步更新所有 Badge 状态（安全访问 .badge 子元素）
badgeItems.forEach((item, index) => {
const badge = item.querySelector('.badge');
if (!badge) return; // 跳过无 badge 的项，防报错
if (index === activeIndex) {
badge.classList.add('badge-dark');
badge.classList.remove('text-bg-light');
} else {
badge.classList.remove('badge-dark');
badge.classList.add('text-bg-light');
}
});
// 4. 自动滚动导航栏，使当前项居中（仅当存在有效 activeIndex）
if (activeIndex !== -1 && scrollContainer && badgeItems[activeIndex]) {
const selectedItem = badgeItems[activeIndex];
const offsetLeft = selectedItem.offsetLeft;
const containerWidth = scrollContainer.clientWidth;
const itemWidth = selectedItem.offsetWidth;
const scrollPosition = offsetLeft - (containerWidth / 2) + (itemWidth / 2);
scrollContainer.scrollTo({
left: scrollPosition,
behavior: 'smooth' // 可选：启用平滑滚动
});
}
};
// 5. 绑定唯一 scroll 监听器
window.addEventListener('scroll', handleScroll);
// 6. 保留悬停交互（与 scroll 逻辑正交，无冲突）
badgeItems.forEach(item => {
const badge = item.querySelector('.badge');
if (!badge) return;
item.addEventListener('mouseover', () => {
badge.classList.replace('text-bg-light', 'badge-dark');
});
item.addEventListener('mouseout', () => {
badge.classList.replace('badge-dark', 'text-bg-light');
});
});
</script>⚠️ 关键注意事项
禁止在 scroll 回调中执行 querySelector 带空 ID 的选择器：
原代码中 href="#${sectionId}" 若 sectionId 为空或含非法字符（如空格、中文未编码），会导致 querySelector 失败。本方案改用预存的 badgeItems 索引映射，彻底规避该风险。锚点跳转无需额外 JS 干预：
<a href="#Desserts"> 是标准 HTML 行为，只要目标 <h3 id="Desserts"> 存在且无 CSS position: fixed/absolute 等干扰布局，浏览器会自动滚动。切勿在 scroll 事件中调用 preventDefault() 或手动 scrollTo() 干预锚点跳转——这正是失效根源。-
性能优化建议：
对于长页面（>50 个分类），可添加 throttle（节流）包装 handleScroll，例如使用 lodash.throttle 或简易时间戳判断：let lastScrollTime = 0; const THROTTLE_MS = 16; // ~60fps window.addEventListener('scroll', () => { const now = Date.now(); if (now - lastScrollTime > THROTTLE_MS) { handleScroll(); lastScrollTime = now; } }); 调试技巧：
在控制台运行 console.log([...sectionHeadings].map(h => h.id)) 验证所有 id 值合法（仅含字母、数字、下划线、短横线）；检查 badgeItems.length === sectionHeadings.length 是否成立，确保结构一致。
通过将滚动逻辑收敛至单一、防御性编写的处理器，既消除了多监听器冲突与 selector 异常，又完全释放了原生锚点能力——最终实现：点击即跳转，滚动即高亮，跨浏览器零差异。
