页面滚动进度条

你肯定在博客或其他类型的文章中见过这种做法（这又有什么区别呢？）。基本上，你（或许确实）被假定为要么超级忙碌要么超级懒惰的读者，因此需要知道自己在视觉上已经浏览了多少页面。所以，会有一个进度条来告诉你已经滚动了多少。它看起来很酷，对你的读者/用户有帮助，而且实现起来非常简单。让我们开始吧。

（如果您正在https://debadeepsen.com/blog/page-scroll-progress-bars-fjl/上查看此帖子，那么您已经可以看到这一点了）

进度百分比

在开始任何进度条之前，我们需要计算进度百分比，也就是页面滚动了多少。感谢CSS Tricks的各位热心人士，我能够轻松地计算出来。以下代码正是这样做的。

let scrollTop = window.scrollY;
let docHeight = document.body.offsetHeight;
let winHeight = window.innerHeight;
let scrollPercent = scrollTop / (docHeight - winHeight);
let scrollPercentRounded = Math.round(scrollPercent * 100);

水平进度条

这个是两者中比较简单的一个。我们只需要div在页面顶部添加一个“棒”，并设置其背景以显示进度的视觉指示。这里的技巧是使用linear-gradient()CSS 函数，您可以在这里阅读所有相关信息。现在，我们需要实现的不是平滑的渐变，而是在某个点上呈现明显的颜色变化。为此，我们可以使用“linear-color-stop”重载（请帮忙检查一下它们在 CSS 中是否仍被称为函数重载，老实说，我不太确定）。如果我们为渐变添加两种颜色，并将进度百分比设置为两种颜色的色标，结果将是明显的颜色变化。由于我们将使用 JavaScript 来设置它，因此效果如下：

document.querySelector("pb").style.background = 
   `linear-gradient(to right, #498 ${scrollPercentRounded}%, #eee ${scrollPercentRounded}%)`;

绿色的“进度条”并没有覆盖在灰色条上，但使用linear-gradient这种方式给人的印象是它确实覆盖在灰色条上。

现在，如果您将上面的 JavaScript 代码添加到onscroll页面的事件处理程序中（请耐心等待，TL;DR CodeSandbox 像往常一样位于本文末尾），您应该能够看到滚动进度条的运行。

圆形进度指示器

圆形进度条（？！）与之类似，只是多了一些编码工作。我们仍然会使用渐变，但这次，我们将使用一种叫做“圆锥渐变”的东西。顾名思义，它通过渐变来呈现……嗯，就像你从上往下看一个圆锥体？（我的描述能力并不出色，所以为什么不去查一下官方文档background呢？）但原理是一样的——我们定义“硬停止”，使渐变看起来不像平滑的渐变，而更像是颜色的急剧变化。这意味着需要以以下方式通过编程方式进行设置。

// using variables from the code block above
let scrollPercent = scrollTop / (docHeight - winHeight);
let scrollPercentRounded = Math.round(scrollPercent * 100);
let degrees = scrollPercent * 360;

document.querySelector(".bg").style.background = `conic-gradient(#498 ${degrees}deg, #ddd ${degrees}deg)`;

顺便说一句，div具有相同height和设置width为的将被呈现为一个完美的圆圈。border-radius50%

现在，如果我们在圆上实现圆锥渐变，它将看起来像一个饼图，就像这样 -

现在，您可以保留饼状进度图，但如果您愿意，还可以使用正确的属性和尺寸在其上覆盖一个圆盘position，它看起来会像这样 -

基本上就是这样了。感谢您耐心阅读（如果您直接跳到本节查看完整代码，我也不讨厌您——我们都很忙）。这是沙盒。祝您编程愉快！