滚动进度条
滚动进度条：页面顶部一条随滚动位置增长的彩条（本文读了 35%）。实现：监听 scroll，进度 = scrollTop /（总高 - 视口高），把比例写进进度条 scaleX 或 width。
性能要点：scroll 事件高频触发，回调里只改 transform（不触重排），并用 rAF 或节流控制频率；进度条元素 fixed 固定在顶部。
- 进度 = scrollTop /（scrollHeight - clientHeight）
- 只改 transform: scaleX，别改 width（避免重排）
- scroll 回调套 rAF：每帧最多算一次
HTML
<style> #progbar { position: sticky; top: 0; height: 4px; background: #f0e6ff; z-index: 10; } #progbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg,#a371f7,#f778ba); transform-origin: left; transform: scaleX(0); } #pbdemo { height: 160px; overflow: auto; } #pbdemo .inner { height: 900px; padding: 16px; color: #888; } </style> <div id="progbar"><i></i></div> <div id="pbdemo"><div class="inner">滚动试试顶部进度条 —— 只改 transform 不卡</div></div> <script> var box = document.getElementById('pbdemo'); var bar = document.querySelector('#progbar i'); var ticking = false; box.addEventListener('scroll', function () { if (ticking) return; ticking = true; requestAnimationFrame(function () { var max = box.scrollHeight - box.clientHeight; var p = max > 0 ? box.scrollTop / max : 0; bar.style.transform = 'scaleX(' + p.toFixed(4) + ')'; ticking = false; }); }); </script>
本节要点进度条 = scrollTop/(总高-视口高)；只写 scaleX，scroll 回调套 rAF。
