使用 CSS 和 JavaScript 在 React 中创建滚动进度条
介绍
我们在博客网站顶部看到了一个进度条，用来显示阅读进度。这看起来很棒，也能让用户知道还有多少篇文章需要阅读。
今天，我们将构建一个能够根据窗口大小和滚动条自动响应的进度条。我将仅使用 CSS 和 JavaScript，不使用任何库来创建这个进度条。这将有助于我们理解构建此功能背后的逻辑。
我们将依次介绍：
- 安装 React
- 构建静态博客页面
- 为进度条添加 CSS 样式
- 添加 JavaScript 代码以查找滚动条
至于先决条件，您必须熟悉 Web 开发。我所说的 Web 开发指的是 HTML、CSS 和 JavaScript。我们选择 React 作为前端框架。
让我们开始构建应用程序吧。
环境设置
在编写任何代码之前，我们先来搭建环境。首先，我们来安装 React。在 React 中输入以下命令来安装 React。
注意：要在终端中运行以下代码和其他代码，我们需要预先安装 nodejs。
npm create-react-app progress-bar
我们将不使用任何库来构建进度条。因此，我们不需要任何其他依赖项。
在职的
在编写任何代码之前，我们先来了解一下进度条的工作原理。为了根据滚动条的宽度改变进度条的宽度，我们需要从页面获取以下属性：
- 滚动条的当前位置：这将帮助我们了解滚动条的位置。进度条会随着滚动条的移动而变化。我们可以通过
scroll监听器获取此信息。该值以像素为单位。 - 总可滚动区域：要了解进度条的长度，我们还需要知道总可滚动区域。我们可以通过 body 元素的 `<body>` 属性来获取它
clientHeight。计算高度时，它不会考虑边距和边框。我们不需要这部分区域，只需要关注内容区域。该值以像素为单位。 - 滚动条大小：滚动条当前位置在顶部时从 0 开始，但由于页面上会显示部分内容，因此无需从 0 开始。滚动条的当前位置会加到滚动条的宽度上，以到达底部。我们可以通过窗口
innerHeight属性获取滚动条的宽度，单位为像素。
现在，我们已经拥有了创建进度条所需的所有属性。唯一的问题是所有属性的单位都是像素。如果我们只想为一种屏幕尺寸实现进度条，可以使用像素作为单位。但为了实现响应式设计，我们需要使用百分比作为单位。
我们可以使用以下公式计算滚动条当前位置占总可滚动区域的百分比：
((scrollbar position + scrollabar height)/total scrollable area)*100
这将为我们提供滚动条相对于总可滚动区域的百分比位置。它将成为进度条的宽度。现在，让我们在代码中实现它。
App.js
我们将实现该功能App.js。让我们逐行分析代码并进行解释。
我们使用三种状态来存储三个属性。您可以查看注释了解每种状态的说明。
const [y, setY] = useState(window.scrollY); // storing current scroll bar positiotn
const [totalY, setTotalY] = useState(); // storing Total Scrollable area
const [scrollBar, setScrollBar] = useState(); // storing Size of scroll bar
我们需要根据滚动条的位置变化来更新进度条。在 React 中，我们可以使用useEffect一个 Hook 来实现这一点，该 Hook 会检测滚动条的位置变化。
useEffect(() => {
window.addEventListener("scroll", () => setY(window.scrollY));
const element = document.getElementsByTagName("body")[0];
setTotalY(element.clientHeight);
setScrollBar(window.innerHeight);
}, [y]);
如工作部分所述，我们正在获取所有必要的属性。
现在，对于进度条的宽度，我们在公式中使用了上述属性，单位为百分比。
const scroll = `${((y + scrollBar) / totalY) * 100}%`;
返回
我们的网站将是一个博客网站，会根据文章长度显示进度条。以下是返回结果的 JSX 代码。
<div>
<div className="progress-bar" style={{ width: scroll }}></div> // This is our
progress bar
<div className="container">
<h1 className="title">How I build a Documentation site using Docz</h1>
<img className="image" src="https://bit.ly/3TAF6Gu" />
<div className="article">
<h2>Introduction</h2>
<p>
Conten of the article.
</p>
</div>
</div>
</div>
以下是进度条的 CSS 代码：
.progress-bar {
height: 20px;
background-color: rgb(236, 20, 20);
overflow: hidden;
position: fixed;
transition: width 2s;
}
我们添加了过渡属性，以便在滚动条变化时实现平滑动画。如果位置固定，它将固定在顶部，滚动时不会隐藏。
添加完所有这些之后，您将能够看到进度条开始运行。这里有一个 GIF 动画演示。
您可以在 CodeSandbox 上找到该项目及其在线演示。CodeSandbox 的链接在此。
联系我
结论
我们已经成功地使用 JavaScript 和一些 CSS 创建了一个进度条。虽然可以使用FrameMotion轻松实现动画效果，但了解其背后的工作原理也有助于更好地理解。一旦理解了，你就可以使用任何框架或库来实现它。
希望这篇文章能帮助你打造一个出色的进度条。感谢阅读这篇博文。
文章来源：https://dev.to/surajondev/creating-scroll-progress-bar-using-css-and-javascript-in-react-85o