横向导航栏平滑滚动必须用 JavaScript 的 scrollTo({ behavior: 'smooth' }) 控制 scrollLeft，CSS 的 scroll-behavior: smooth 对其无效；需结合 scroll-margin-inline-start 避免目标被遮挡，并注意兼容性与事件绑定规范。
横向导航栏滚动本身不触发 scroll-behavior: smooth
很多人给 html 或 body 加了 scroll-behavior: smooth，结果点击标签页还是“咔”一下跳过去——因为这个 CSS 属性只对**主文档滚动容器（即整页纵向滚动）生效**，对横向滚动的导航栏（比如 overflow-x: auto 的标签栏）完全没作用。
横向导航栏的平滑滚动必须靠 JS 主动控制，核心是调用 scrollTo() 并传入 { behavior: 'smooth' }。
- 目标元素必须是设置了
overflow-x: auto（或scroll）且有固定宽度/高度的容器，例如.tabs-container - 不能依赖
a[href="#tab2"]这类锚点跳转，它只触发页面级纵向滚动 - 横向滚动不产生
scroll事件，所以监听window.onscroll没用
用 scrollTo({ behavior: 'smooth' }) 控制横向滚动位置
最可靠的方式是：拿到目标 tab 元素在容器内的 offsetLeft，再用 scrollTo() 滚到对应位置。注意不是 scrollTop，而是 scrollLeft。
示例代码（假设导航栏容器 class 是 tabs-container，每个 tab 是 .tab）：
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
const container = document.querySelector('.tabs-container');
const left = tab.offsetLeft - container.offsetLeft;
container.scrollTo({ left, behavior: 'smooth' });
});
});
- 别用
container.scrollLeft = left—— 这是瞬间跳转，无动画 - 确保
tab.offsetLeft可读：tab 不能是display: none或未渲染状态 - 如果容器用了
padding-left，left值需额外减去该 padding，否则定位偏右
滚动后目标 tab 被遮挡？用 scroll-margin-inline-start 补偿
横向导航栏常带左侧固定按钮（如“←”箭头），滚动后目标 tab 可能被遮住。CSS 中没有 scroll-margin-top 的横向等价物，但可以用 scroll-margin-inline-start（现代浏览器支持）。
给目标 tab 元素加：
.tab.active {
scroll-margin-inline-start: 16px;
}
- 该属性会让
scrollIntoView()或scrollTo()在定位时，自动预留左侧间距 - 仅在目标处于可滚动上下文（即父容器有
overflow-x）时生效 - Safari 15.4+、Chrome 89+、Firefox 95+ 支持；旧版 Safari 需降级为手动计算
left偏移
移动端拖拽 + 滚轮支持不能只靠 scrollTo
纯 scrollTo({ behavior: 'smooth' }) 解决不了用户手指拖拽或鼠标滚轮横向滚动的体验问题。这时候要分两层处理：
- 用户拖拽/滚轮：保持原生行为，不做干预（浏览器自己处理惯性、阻尼）
- 点击跳转：用
scrollTo平滑滚动，同时加touch-action: pan-y到容器上，防止 iOS 误触发页面缩放 - 避免重复绑定：同一个 tab 元素不要多次
addEventListener('click', ...)，否则会滚多次
真正容易被忽略的是：横向滚动容器的 scroll-behavior 属性即使写了也无效，必须明确放弃 CSS 方案，转向 JS 控制；而 scroll-margin-inline-start 这种新属性，不查 MDN 很难意识到它存在，更别说用对时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
