简介
在本实验中，我们将探索如何使用 HTML、CSS 和 JavaScript 创建一个滚动进度条。滚动进度条是一种很好的方式，可以指示用户在页面上的当前位置以及还有多少内容有待查看。在本实验结束时，你将更好地理解如何在你的网站上实现此功能。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 84%。获得了学习者 100% 的好评率。
滚动进度条
虚拟机中已经提供了 index.html 和 style.css。
要创建一个显示网页滚动百分比的进度条，请按照以下步骤操作：
- 在 HTML 代码中添加一个
id为 "scroll-progress" 的div元素。 - 在 CSS 代码中，将该元素的
position设置为fixed，top设置为0，width设置为0%，height设置为4px，background颜色设置为#7983ff。 - 将
z-index值设置为一个较大的数字，以确保进度条位于页面顶部且在任何内容之上。 - 在 JavaScript 代码中，使用
document.getElementById()方法选择scroll-progress元素。 - 使用公式
document.documentElement.scrollHeight - document.documentElement.clientHeight计算网页的高度。 - 向
window对象添加一个事件监听器，监听scroll事件。 - 在事件监听器函数中，使用公式
(scrollTop / height) * 100计算文档的滚动百分比。 - 使用
style属性将scroll-progress元素的width设置为滚动百分比。
以下是代码：
<div id="scroll-progress"></div>
#scroll-progress {
position: fixed;
top: 0;
width: 0%;
height: 4px;
background: #7983ff;
z-index: 10000;
}
const scrollProgress = document.getElementById("scroll-progress");
const height =
document.documentElement.scrollHeight - document.documentElement.clientHeight;
window.addEventListener("scroll", () => {
const scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
});
请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已经完成了滚动进度条实验。你可以在 LabEx 中练习更多实验来提升你的技能。