绚丽夺目的全屏滚动进度条指示器：为网页注入生机和活力

2022-12-05 23:30:32

全屏滚动进度条指示器：提升网页体验的指南

在当今快节奏的数字世界中，网页加载速度和用户体验至关重要。全屏滚动进度条指示器正成为网页设计者提升用户友好的有力工具，让用户轻松了解网页中的位置，并顺畅地浏览不同内容区域。

CSS 滚动进度条的优势

美观大气： 全屏滚动进度条指示器为网页增添美感，提升其时尚度和现代感。
用户友好： 它直观地展示用户在网页中的位置，方便他们快速访问特定内容部分。
交互性强： 用户通过滚动页面即可控制进度条显示，增强了交互体验。
适应性好： 进度条指示器可与不同网页设计相匹配，并可按需进行定制。

制作 CSS 滚动进度条指示器

步骤 1：创建 HTML 文件

<!DOCTYPE html>
<html>
<head>

<style>
body {
  height: 100vh;
  overflow: scroll;
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #fff;
}

#progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background-color: #000;
}
</style>
</head>
<body>
<div id="progress-bar">
  <div id="progress-bar-fill"></div>
</div>

<!-- 网页内容 -->

</body>
</html>

步骤 2：创建 CSS 文件

body {
  height: 100vh;
  overflow: scroll;
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #fff;
}

#progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background-color: #000;
}

/* 滚动页面时，进度条填充部分的宽度逐渐增加 */
window.addEventListener("scroll", function() {
  var scrollTop = document.documentElement.scrollTop;
  var windowHeight = window.innerHeight;
  var documentHeight = document.documentElement.scrollHeight;

  var progressWidth = (scrollTop / (documentHeight - windowHeight)) * 100;

  document.getElementById("progress-bar-fill").style.width = progressWidth + "%";
});