滚动进度条

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用 HTML、CSS 和 JavaScript 创建一个滚动进度条。滚动进度条是一种很好的方式,可以指示用户在页面上的当前位置以及还有多少内容有待查看。在本实验结束时,你将更好地理解如何在你的网站上实现此功能。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") subgraph Lab Skills css/selectors -.-> lab-35236{{"`滚动进度条`"}} css/colors -.-> lab-35236{{"`滚动进度条`"}} css/width_and_height -.-> lab-35236{{"`滚动进度条`"}} css/positioning -.-> lab-35236{{"`滚动进度条`"}} css/backgrounds -.-> lab-35236{{"`滚动进度条`"}} end

滚动进度条

虚拟机中已经提供了 index.htmlstyle.css

要创建一个显示网页滚动百分比的进度条,请按照以下步骤操作:

  1. 在 HTML 代码中添加一个 id 为 "scroll-progress" 的 div 元素。
  2. 在 CSS 代码中,将该元素的 position 设置为 fixedtop 设置为 0width 设置为 0%height 设置为 4pxbackground 颜色设置为 #7983ff
  3. z-index 值设置为一个较大的数字,以确保进度条位于页面顶部且在任何内容之上。
  4. 在 JavaScript 代码中,使用 document.getElementById() 方法选择 scroll-progress 元素。
  5. 使用公式 document.documentElement.scrollHeight - document.documentElement.clientHeight 计算网页的高度。
  6. window 对象添加一个事件监听器,监听 scroll 事件。
  7. 在事件监听器函数中,使用公式 (scrollTop / height) * 100 计算文档的滚动百分比。
  8. 使用 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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程