横向导航栏高亮应基于滚动结束时校准而非实时判断，优先使用@scrollend或IntersectionObserver（阈值0.3），结合$nextTick或requestAnimationFrame确保DOM重排，并通过元素id或data-section绑定状态，避免URL硬匹配。
横向导航栏高亮跟随滚动，本质不是“滚动时实时判断”，而是“滚动结束时校准当前项”。硬靠 window.onscroll 频繁计算位置，90% 的翻车都出在这里。
scroll-end 事件才是高亮校准的唯一可信时机
浏览器滚动是异步渲染过程，scroll 事件在快速滑动中会节流、抖动，window.scrollY 和 element.offsetTop 的差值在 iOS 和低端安卓上极易偏差 1–3px，导致高亮错位或跳闪。
- uni-app 必须监听
@scrollend，而不是@scroll - H5 端可用
IntersectionObserver（兼容到 Chrome 51+/Safari 12.1+），但需 fallback 到 scroll-end 查询 - 手动触发校准前加
this.$nextTick(() => { ... })（Vue）或requestAnimationFrame(() => { ... })（原生），确保 DOM 已重排
active class 不能靠路径字符串硬匹配
location.pathname === '/projects' 这类写法在哈希路由（#projects）、带查询参数（?ref=nav）、末尾斜杠（/about/ vs /about）场景下必然失效。
- 高亮逻辑应绑定到目标区块的
id或data-section属性，而非 URL - 用
document.elementFromPoint(x, y)或getBoundingClientRect()获取当前视口中心区域的 section 元素，再取其id - 若用 IntersectionObserver，阈值设为
{ threshold: 0.3 }，避免刚进入就触发，等至少 30% 可见才认定为“当前”
横向导航项宽度不一致时，居中滚动会偏移
点击导航项后调 scrollIntoView({ block: 'nearest', inline: 'center' })，如果子项宽度不固定（比如文字长度差异大），视觉上会发现目标项没真正在中间——因为 inline: 'center' 是按元素盒模型中心算的，不是文字视觉中心。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 统一设
width: 160rpx（uni-app）或min-width: 120px（H5），配合text-overflow: ellipsis - 避免用
flex: 1均分宽度，文字长短会导致 padding/margin 渲染误差放大 - 滚动后手动微调：获取目标元素
getBoundingClientRect()，再用window.scrollTo()补偿 10–15px 偏移
移动端隐藏滚动条但保留拖拽，各端写法不通用
scroll-view 在 uni-app 里默认显示滚动条，iOS 和小程序能用 CSS 隐藏，但 H5 端必须用 JS 拦截并模拟拖拽行为，否则用户根本拖不动。
- uni-app 中：
scroll-x="true"+class="hide-scrollbar"，然后在样式里写：.hide-scrollbar::-webkit-scrollbar { display: none; } - H5 端需额外监听
touchstart/touchmove，用event.preventDefault()阻止默认滚动，再用transform: translateX()模拟惯性 - 真机调试时务必关闭 HBuilderX 的「启用滚动区域优化」，否则 iOS 下
touchmove会被静默吞掉
最易被忽略的一点：高亮状态必须和滚动目标严格解耦。导航点击触发滚动，滚动结束才更新高亮；反过来，滚动不能反向驱动导航点击——否则用户手滑滚过头再回拉，高亮会来回跳，体验直接崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
