使用 JavaScript 和 CSS 为您的博客创建阅读滚动进度条

我最近在我的网站上添加了一个有趣的小功能：阅读博客文章时的进度条。进度条会显示用户阅读文章的进度，从一开始的 0% 到用户读完时的 100%。

近年来，这项小功能在其他博客和 Wordpress 主题中尤为流行。例如，热门科技刊物TechCrunch就使用了圆形滚动进度条，许多其他网站也拥有类似的功能。事实上，如果您在我的网站上阅读这篇文章，您或许会在屏幕顶部看到这项功能！

下面是 CodePen 上带有演示的水平滚动进度条的快速教程和说明。

现场演示和最终 CodePen

编写 HTML 和 CSS

首先，让我们创建一个帖子容器div，其中包含读者将要阅读的博客文章的 HTML 内容。在其中div，我们还将添加一个进度条元素，用于滚动进度条。

<div class="post_container"></div>

在帖子容器元素的开头，让我们添加进度条 HTML，它看起来像这样：

<div class="post-container">
    <div class="progress-bar-container">
        <div class="progress-bar-container__progress"></div>
    </div>
</div>

请注意，在这篇文章中，我将使用 BEM 方法作为 CSS 类名。

这里的总体思路是将进度条容器固定在帖子容器的顶部，并保持其宽度。在该容器内，可以使用 JavaScript 将实际进度条的大小调整到正确的宽度。

以下是其基本 CSS：

/* default CSS variables */
:root {
    --progress-color: #2ecc71;
    --progress-height: .5rem;
}

/* post container */
.post-container {
    overflow: scroll;
}

/* progress bar container */
.progress-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--progress-height);
}

/* progress bar */
.progress-bar-container > .progress {
    height: var(--progress-height);
    background-color: var(--progress-color);
    width: 0%;
    float: left;
}

请注意，在这种情况下，CSS 假定.post-container元素是可滚动区域（如用线定义），但如果您愿意，overflow: scroll可以将其更改为不同的元素或您自己的元素。body

我还使用 CSS 变量来设置进度条的高度和颜色，这样如果您愿意的话，可以更轻松地更改进度条的属性。

例如，当我将宽度设置为 50% 时，效果如下（帖子容器中包含示例内容）：

让我们为此编写 JavaScript！

对于 JavaScript，我将首先为每个相关的 HTML 元素定义变量：

// variables for progress bar and post container elements
const progressContainerEl = document.querySelector(".post-container");
const progressBarEl = document.querySelector(".progress-bar-container__progress");

创建更新进度条宽度的函数

让我们创建一个函数来检查当前滚动位置并计算已读帖子的百分比，然后相应地设置进度条宽度。

为了计算滚动百分比，让我们将当前滚动位置（来自scrollTop属性）除以元素的完整滚动高度（使用我从 Stack Overflow 获得的函数计算）。

然后我将进度条元素的宽度样式设置为计算出的百分比。

下面是代码：

// function to check scroll position and update scroll progress bar accordingly
const updateScrollProgressBar = () => {
    // get full scroll height
    const scrollHeight = progressContainerEl.scrollHeight - heightInViewport(progressContainerEl);
    console.log(scrollHeight);
    // get current scroll position
    const scrollPosition = progressContainerEl.scrollTop;

    // get scroll percentage and set width of progress bar
    const scrollPercentage = (scrollPosition / scrollHeight) * 100;
    progressBarEl.style.width = scrollPercentage + "%";
}

// function to get visible height in viewport
// some code taken from user Roko C. Buljan on https://stackoverflow.com/questions/24768795/get-the-visible-height-of-a-div-with-jquery
function heightInViewport(el) {
    var elH = el.offsetHeight,
        H   = document.body.offsetHeight,
        r   = el.getBoundingClientRect(), t=r.top, b=r.bottom;
    return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}

滚动时调用函数

为了将所有这些整合在一起并使一切正常工作，我们需要在每次用户滚动和页面加载时调用该函数。为此，可以将该函数绑定到onscroll帖子容器的事件以及onload窗口的事件。

// bind window onload and onscroll events to update scroll progress bar width
progressContainerEl.addEventListener("scroll", updateScrollProgressBar)
progressContainerEl.addEventListener("load", updateScrollProgressBar)

完成了！

这样我们就完成了。这是最终的 CodePen：

我希望你喜欢这篇文章，并且发现它很有用。

感谢您的浏览。

— 加布里埃尔·罗穆阿尔多，2020 年 2 月 5 日

文章来源：https://dev.to/gaberomualdo/create-a-reading-scroll-progress-bar-for-your-blog-in-javascript-and-css-1jmc