页面滚动进度条通过JavaScript监听滚动事件，计算滚动比例并更新顶部进度条宽度实现。1. 创建固定在顶部的div作为进度条；2. 用CSS设置其样式和定位；3. JS中通过pageYOffset、scrollHeight和innerHeight计算滚动百分比；4. 使用requestAnimationFrame优化性能，避免频繁触发。正确计算可滚动范围确保进度条从0%平滑到100%。
页面滚动进度条能直观显示用户当前浏览位置，提升体验。用 JavaScript 实现很简单，只需监听滚动事件，动态更新进度条的宽度即可。
1. 创建进度条结构
在页面顶部添加一个用于显示进度的元素，通常是一个固定在顶部的细条。
使用 CSS 设置样式，让它始终显示在页面最上方。
#progress-bar {
height: 4px;
background: #007cba;
position: fixed;
top: 0;
left: 0;
width: 0;
z-index: 9999;
}
2. 编写 JS 滚动监听脚本
通过计算当前滚动高度与总可滚动高度的比例，得出进度百分比。
window.addEventListener(‘scroll’, function() {
const scrollTop = window.pageYOffset;
const docHeight = document.documentElement.scrollHeight;
const winHeight = window.innerHeight;
const scrollPercent = scrollTop / (docHeight – winHeight);
const scrollPercentage = scrollPercent * 100;
document.getElementById(“progress-bar”).style.width = scrollPercentage + “%”;
});
说明：
pageYOffset 获取垂直滚动距离scrollHeight 是整个文档高度innerHeight 是可视窗口高度可滚动的最大值是 scrollHeight – innerHeight
3. 优化性能（可选）
频繁触发 scroll 事件可能影响性能，可以用节流或 requestAnimationFrame 优化。
let ticking = false;
window.addEventListener(‘scroll’, function() {
if (!ticking) {
requestAnimationFrame(function() {
const scrollTop = window.pageYOffset;
const docHeight = document.documentElement.scrollHeight – window.innerHeight;
const scrollPercent = docHeight === 0 ? 0 : scrollTop / docHeight;
document.getElementById(“progress-bar”).style.width = scrollPercent * 100 + “%”;
ticking = false;
});
ticking = true;
}
});
这样可以避免重复计算，提高流畅度。
基本上就这些。不复杂但容易忽略细节，比如总高度减去视口高度才是实际可滚动范围。正确计算才能让进度条从 0% 平滑走到 100%。
以上就是如何用js脚本实现页面滚动进度条_js滚动进度显示脚本编写方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538934.html
微信扫一扫 
支付宝扫一扫 
