CSS - 滚动条：初学者指南

你好，未来的网页设计巫师们！今天，我们将深入CSS滚动条的神奇世界。如果你之前从未编写过一行代码，也不用担心——我将作为你在这段旅程中的友好向导，到了最后，你将能够像专业人士一样设置滚动条的样式！

CSS - Scrollbars

滚动条简介

在我们深入了解之前，先来谈谈滚动条是什么。你每天浏览网页时都会看到它们——它们是网页侧面或底部的小条，当屏幕上一次无法显示所有内容时，让你可以上下或左右滚动。

现在，想象一下如果你能挥动魔杖改变这些滚动条的外观。这正是我们今天要用CSS学习的内容！

如何设置滚动条样式？

用CSS设置滚动条样式就像给网页进行改造。这是一种让你的网站脱颖而出并提供独特用户体验的方式。让我们从一个简单的例子开始：

/* 这适用于你网页的整个主体 */
body::-webkit-scrollbar {
width: 12px;               /* 滚动条的整体宽度 */
}

body::-webkit-scrollbar-track {
background: orange;        /* 跟踪区域的颜色 */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* 滚动块的颜色 */
border-radius: 20px;       /* 滚动块的圆角 */
border: 3px solid orange;  /* 在滚动块周围创建内边距 */
}

在这个例子中，我们告诉浏览器：

使滚动条宽度为12像素
将轨道（滚动块滑动的区域）设置为橙色
将滚动块（你抓取以滚动的内容）设置为蓝色
给滚动块添加圆角
在滚动块周围添加橙色边框

很酷，对吧？但等等，还有更多！

滚动条选择器

为了设置滚动条样式，我们使用特殊的选择器。把这些想象成魔法词，告诉CSS要更改滚动条的哪个部分。以下是一些主要的：

选择器	描述
::-webkit-scrollbar	设置整个滚动条
::-webkit-scrollbar-button	设置滚动条上的按钮（指向上下方的箭头）
::-webkit-scrollbar-track	设置轨道（进度条）
::-webkit-scrollbar-track-piece	设置轨道（进度条）上未被手柄覆盖的部分
::-webkit-scrollbar-thumb	设置可拖动的滚动块
::-webkit-scrollbar-corner	设置滚动条底部角落，水平和垂直滚动条相遇的地方
::-webkit-resizer	设置出现在某些元素底部角落的可拖动调整大小手柄

创建自定义滚动条

现在我们知道了我们的魔法词（选择器），让我们创建一个有趣的、自定义的滚动条：

/* 让我们创建一个霓虹主题的滚动条！ */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

在这个例子中，我们创建了一个看起来像赛博朋克电影中的滚动条！轨道是黑色，带有微妙的内阴影，滚动块有渐变效果，在悬停时颜色会改变。将这个类应用到任何具有溢出的元素上，就会发生魔法！

设置CSS滚动条样式

让我们将设置滚动条样式的过程分解为步骤：

选择目标：决定你是想为整个页面设置滚动条样式（使用body），还是仅为特定元素设置（使用类或ID）。
设置宽度：使用::-webkit-scrollbar选择器来设置滚动条的整体宽度。
设置轨道样式：使用::-webkit-scrollbar-track来设置轨道的背景、添加阴影或其他样式。
设计滚动块：使用::-webkit-scrollbar-thumb来设置滚动条的可拖动部分。这里你可以发挥创意，使用颜色、渐变和形状。
添加交互性：使用伪类如:hover或:active来改变用户与滚动条交互时的外观。

以下是一个将所有内容结合在一起的例子：

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

这为任何带有cool-scroll类的元素创建了一个时尚的现代滚动条。滚动条比默认宽一些，有圆角，并且在悬停时变暗。

CSS滚动条相关属性

虽然我们一直在关注WebKit浏览器（如Chrome和Safari），但是还有一些标准CSS属性可以在不同的浏览器上工作。以下是一个表格：

属性	描述
scrollbar-width	设置滚动条的宽度（仅适用于Firefox）
scrollbar-color	设置滚动条的颜色（仅适用于Firefox）
overflow	指定如果内容溢出元素框要做什么
overflow-x	指定如果内容溢出元素的内容区域左侧/右侧边缘要做什么
overflow-y	指定如果内容溢出元素的内容区域顶部/底部边缘要做什么

以下是如何使用它们：

/* 对于Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* 对于其他浏览器 */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

这段代码在不同的浏览器上设置了统一的滚动条样式。它是细的，有浅色的轨道和更深的滚动块。

那么，伙计们，就是这样！你已经提升了自己的CSS技能，并学会了如何设置滚动条。记住，能力越大，责任越大——明智地使用这些技术来增强用户体验，而不是创建分散注意或难以使用的界面。

继续尝试，不断学习，最重要的是，享受其中的乐趣！谁知道呢，也许下一个网页设计的趋势就是你独特设计的滚动条。快乐编码！

Credits: Image by storyset