滚动指示器宽度不随滚动平滑变化？检查 transition 是否作用于 CSS 变量
直接改 --scroll-width 这类 CSS 变量本身不会触发过渡动画，CSS 的 transition 默认只响应“可动画化属性”（如 width、opacity），不响应自定义变量变更。必须把变量值“映射”到真实可过渡属性上。
- 正确做法：用
width: calc(var(--scroll-width) * 1px);或flex-basis: var(--scroll-width);，再对width或flex-basis设置transition - 错误写法：
transition: --scroll-width 0.3s ease;—— 这行无效，浏览器忽略 - 注意单位：CSS 变量里存纯数字（如
65）更安全；若存带单位的值（如65%），calc()中拼接易出错
JS 修改 CSS 变量后宽度跳变？确保 transition 属性在初始样式中已声明
过渡效果必须在元素首次渲染时就存在，不能靠 JS 后续补上。否则第一次修改变量时，浏览器会跳过过渡直接生效。
- 必须在 CSS 中提前写好：
transition: width 0.3s ease;（或flex-basis等目标属性） - JS 里只做一件事：
element.style.setProperty('--scroll-width', scrollPercent); - 避免在 JS 中动态加
style.transition = '...'—— 它可能被后续重绘覆盖，且无法保证时机 - 如果用
transform: scaleX(...)替代width，记得给容器设transform-origin: left center;防止缩放偏移
滚动过程中频繁触发 setProperty 导致卡顿？加节流但别锁死更新节奏
原生 scroll 事件每秒可能触发上百次，每次调用 setProperty + 触发重排，容易掉帧。但过度节流（如固定 100ms）会让指示器明显滞后。
- 推荐用
requestAnimationFrame节流：在下一帧统一读取scrollTop并更新变量，既顺滑又不丢精度 - 避免用
setTimeout或 Lodash 的throttle—— 它们可能把多次滚动合并成一次，导致快速滚动时指示器“蹦跳” - 示例关键逻辑：
let ticking = false;<br>const updateIndicator = () => {<br> const percent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;<br> indicator.style.setProperty('--scroll-width', percent);<br> ticking = false;<br>};<br>window.addEventListener('scroll', () => {<br> if (!ticking) {<br> requestAnimationFrame(updateIndicator);<br> ticking = true;<br> }<br>});
兼容性问题：Safari 对 CSS 变量 + transition 的组合支持不稳定？降级方案要留一手
Safari 14–15 在某些场景下（尤其是 flex 容器内用 flex-basis: var(--x)）会出现过渡失效或初始值不生效。不能只押注变量方案。
- 稳妥做法：用
width+%作为兜底，通过@supports (background: paint(...))或 JS 检测来分流 - 更轻量的检测：
CSS.supports('transition', 'width 0.3s')和typeof CSS != "undefined"足够判断基础能力 - 别依赖
will-change: width强制优化 —— 它在 Safari 上反而可能引发渲染异常 - 移动端 iOS WebKit 仍存在 scroll event 延迟，必要时监听
touchmove补充更新（但仅限全屏滚动场景）
过渡是否生效，最终取决于“哪个属性被过渡”和“它是否真的随变量变化”。变量只是中间传参工具，不是动画主体。这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
