滚动条 CSS 用 24 行 CSS 创建自定义滚动条 HTML。CSS。JavaScript。结论。

2025-05-24

滚动条 CSS用 24 行 CSS 创建自定义滚动条

HTML。

CSS。

JavaScript。

结论。

你有没有遇到过一个带有漂亮滚动条的网站，然后心想：“哇，我希望我也能设计出这样的东西。” 我也是！经过一番研究，我发现为你的博客或个人作品集创建自定义滚动条并不需要大量的 CSS。

今天我们将创建一个渐变进度条，它会随着滚动从零透明度逐渐变为完全透明度。本教程只需要基本的 HTML、CSS 和 JavaScript 知识，无需使用任何 JavaScript 框架或库。完整代码可在CodePen上找到！

HTML。

首先，让我们创建文档结构。在 HTML CodePen 编辑器中，让我们添加两个元素：进度条和进度容器。

进度条将显示用户已向下滚动页面的距离。进度条容器将跨越整个页面的高度并包含进度条。

我们再添加一个页眉，其中包含“欢迎”字样和一些 lorem ipsem 段落。我添加了七个段落，但为了简洁起见，本文只包含一个。

<h1>Welcome.</h1>
<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur
  provident eveniet veritatis ipsa id consectetur ab tenetur dolores eaque.
  Temporibus laboriosam cum corporis amet doloremque animi aut ipsa ea a?
</p>
Enter fullscreen mode Exit fullscreen mode

这是我们的网页当前的样子。

HTML 页面

CSS。

现在我们可以添加样式了。首先，我们来添加一些基本的页面样式，让网站看起来更美观一些。

body {
  background: #171414;
  font-family: "Courier New", Courier, monospace;
  color: #ffffff;
  padding: 15% 15% 5%;
}

p {
  font-size: 1.8rem;
}

p:first-of-type {
  margin-top: 100px;
}

h1 {
  font-size: 200px;
  position: absolute;
  top: -5%;
  left: 15%;
  opacity: 25%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

CSS 1

接下来让我们隐藏默认浏览器滚动条。我们可以使用 webkit 供应商前缀来隐藏 Chrome 和 Safari 中的滚动条。

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
Enter fullscreen mode Exit fullscreen mode

我们需要对 Firefox 进行特殊考虑，因为它不是 webkit 浏览器，并且不会响应 webkit 供应商前缀（如 Chrome 和 Safari）。

html {
  scrollbar-width: none;
}
Enter fullscreen mode Exit fullscreen mode

现在我们准备设置自定义滚动条的样式。首先，我们来设置滚动条容器。我们希望滚动条容器固定在视口的右侧，因此我们将使用固定位置，并将顶部和右侧的值设置为 0。我们将滚动容器的宽度设置为 10 像素，背景颜色为浅灰色。

#progressBarContainer {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
}
Enter fullscreen mode Exit fullscreen mode

现在您应该看到滚动容器出现在视口的右侧。

CSS 2

我们的进度条也将固定在视口的右侧，宽度为 10 像素，但是，我们将为其提供从红色到紫色的线性渐变，以使其脱颖而出。

#progressBar {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  background: linear-gradient(to top, violet, red);
  height: 100%;
  opacity: 100%;
}
Enter fullscreen mode Exit fullscreen mode

CSS 3

我们希望在滚动时动态更新进度条的高度和不透明度，因此我们将高度和不透明度设置为零。

#progressBar {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  background: linear-gradient(to top, violet, red);
  height: 0;
  opacity: 0;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript。

要更新进度条的高度和透明度，我们需要编写几行 JavaScript 代码。首先，我们来获取进度条的 DOM 节点。

const progressBar = document.querySelector("#progressBar");
Enter fullscreen mode Exit fullscreen mode

我们还需要计算网页的总高度。我们可以通过从整个文档主体滚动高度中减去窗口内部高度来计算总高度。

let totalPageHeight = document.body.scrollHeight - window.innerHeight;
Enter fullscreen mode Exit fullscreen mode

接下来，让我们为窗口添加一个事件监听器。当滚动时，我们需要计算新的进度高度。我们可以先将窗口页面的 Y 轴偏移量除以页面总高度，得到一个十进制小数。要在 CSS 代码中使用此值，我们必须将这个小数乘以 100（得到百分比）。

最后，我们可以将进度条的高度和不透明度设置为新的进度高度。

不熟悉${}语法？它被称为模板字符串或模板文字，它允许你将求值的表达式（${} 之间的值）与普通字符串组合起来。

window.onscroll = () => {
  let newProgressHeight = (window.pageYOffset / totalPageHeight) * 100;
  progressBar.style.height = `${newProgressHeight}%`;
  progressBar.style.opacity = `${newProgressHeight}%`;
};
Enter fullscreen mode Exit fullscreen mode

结论。

就这样！现在，只需几行 CSS，你就拥有了一个漂亮的自定义滚动条。

文章来源：https://dev.to/emmabostian/creating-a-custom-scroll-bar-in-24-lines-of-css-4gg0
Devto 翻译
PREV
使用 JavaScript 方法创建图形可视化数据
NEXT
JavaScript 中的冒泡排序 概念 1 概念 2 运行时