标签页切换时滚动条不同步是默认行为，需手动同步scrollleft与激活状态；推荐用scrollintoview({inline:'nearest'})定位当前标签，动态元素需dom插入后调用，移动端safari需fallback至手动计算scrollleft。
标签页切换时滚动条没跟着动，或者滚动后点击标签页跳回顶部——这不是 bug，是默认行为没被干预。必须手动同步 scrollLeft 和标签激活状态，否则两者完全脱节。
用 scrollIntoView 主动定位到当前激活标签
最直接的办法不是改滚动条，而是让容器“把当前标签滚进视野”。前提是标签有唯一 id 或可被选中。
- 每次切换标签后，调用
activeTabElement.scrollIntoView({ inline: 'nearest', block: 'nearest' }) - 别用
{ inline: 'center' }，它在窄屏下容易把标签滚出可视区边缘 - 如果标签是动态生成的，确保在 DOM 插入完成后再调用，避免
scrollIntoView找不到元素 - 移动端 Safari 对
scrollIntoView的inline行为支持不稳定，可 fallback 到手动计算scrollLeft
监听容器 scroll 事件反向更新激活标签
用户手动横向滚动时，得知道哪个标签现在“在中间”或“刚进入视野”，才能高亮对应项。不能只靠位置像素硬算，得结合几何信息。
- 用
getBoundingClientRect()获取每个标签的left和width，对比容器scrollLeft+clientWidth - 推荐用
IntersectionObserver监听标签是否进入视口（尤其适合长列表），但要注意：它不触发于初始滚动位置，需手动触发一次检查 - 避免在
scroll回调里频繁调用querySelector或重排，用requestAnimationFrame节流 - 别只看“是否相交”，加个偏移阈值（如
threshold: 0.3），防止快速滑过时标签高亮闪烁
切换标签时手动设置 scrollLeft 避免跳帧
当标签数量多、宽度不均，或容器有 padding/border 时，scrollIntoView 容易定位不准。这时得自己算目标位置。
- 先获取激活标签相对于容器左边缘的偏移：
tab.offsetLeft - container.offsetLeft - 但这个值不含容器已有的
scrollLeft，要减去它再设新值，否则会叠加滚动 - 记得四舍五入到整数：
Math.round(newScrollLeft)，避免 subpixel 渲染导致小数位累积偏差 - 设完后立刻调
container.scrollTo({ left: value, behavior: 'smooth' })，别直接赋值scrollLeft，否则无动画
隐藏原生滚动条但保留滚动能力
视觉上要“像 native tabBar”，就得藏掉滚动条，又不能让它失效。Webkit 浏览器能用伪元素，其他浏览器得靠覆盖层或透明处理。
- 对 Webkit 内核（Chrome/Safari/Edge）：用
::-webkit-scrollbar { display: none; } - Firefox 不支持该伪类，可用
overflow-x: overlay（仅部分版本）或 JS 检测后加 class 控制透明度 - 绝对不要设
overflow-x: hidden，那会彻底禁用滚动，scrollIntoView和scrollTo全部失效 - 移动端 iOS 需额外加
-webkit-overflow-scrolling: touch启用惯性滚动，否则拖拽卡顿
真正难的不是“怎么滚”，而是“什么时候不该滚”——比如用户正在拖拽，标签却因滚动事件被误判激活；或者多个标签宽度接近，IntersectionObserver 在边界反复触发。这些边界情况得靠 flag 控制和阈值过滤，不能全依赖 API 默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
