用CSS打造阅读进度条

前端

2023-07-25 18:50:45

拥抱CSS魅力，打造动感十足的阅读进度条

在网站设计的广阔世界中，阅读进度条一直默默无闻地扮演着重要的角色。它就像一位贴心的向导，帮助用户轻松掌握自己的阅读进度，提升整体体验。然而，传统的JavaScript方法往往复杂且费时，阻碍了我们充分发挥这一强大工具的潜力。

今天，让我们打破窠臼，用CSS的魔法来挥洒创意，打造出动感十足的阅读进度条，开启一段轻松愉快的阅读之旅。

CSS阅读进度条的基本原理

CSS阅读进度条的魅力源于CSS的animation-timeline特性。它巧妙地与滚动事件相结合，在用户滚动页面时逐步填充一个条形，从而产生阅读进度的视觉效果。

1. 动画时间线： animation-timeline属性允许我们创建动画时间线，指定动画的持续时间、方向和延迟。通过调整这些参数，我们可以控制进度条的运动，使其与滚动速度和页面长度相匹配。

2. 滚动事件监听器： 当用户滚动页面时，浏览器会触发滚动事件。我们可以利用addEventListener函数来监听滚动事件，并将其与动画时间线相关联。这样，当用户滚动时，动画时间线就会自动启动，开始填充进度条。

打造阅读进度条：一步一步实现CSS魔法

HTML结构： 首先，我们需要一个包含滚动内容的容器，以及一个用来显示进度条的元素。HTML结构示例如下：

<div class="container">
  <div class="content">
    <!-- 文章或内容 -->
  </div>
  <div class="progress-bar"></div>
</div>

CSS样式： 接下来，我们使用CSS来设置容器的样式，并为进度条定义动画。CSS代码示例如下：

.container {
  position: relative;
  height: 100vh;
  overflow: scroll;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #ccc;
  animation: progress-bar 10s linear forwards;
}

@keyframes progress-bar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

JavaScript脚本： 最后，我们需要用JavaScript来监听滚动事件，并将其与动画时间线相关联。JavaScript代码示例如下：

window.addEventListener('scroll', function() {
  const container = document.querySelector('.container');
  const progressbar = document.querySelector('.progress-bar');
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = scrollTop / (scrollHeight - windowHeight);
  progressbar.style.width = `${progress * 100}%`;
});