如何使用 CSS 设置和自定义水平和垂直滚动条
原创如何使用 CSS 设置和自定义水平和垂直滚动条
原创
滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。在其他情况下，UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器的内容。每个浏览器都有一组默认的滚动条样式。在某些情况下，您可能有充分的理由来定制滚动条。例如，您可以定制滚动条样式以匹配网站的外观和感觉。
在本文中，我们将讨论何时设置水平和垂直滚动条，如何设置它们以及如何使用CSS自定义它们的外观。
我们将在以下几个部分中讨论这个主题：
设置自定义垂直滚动条
设置自定义水平滚动条
自定义滚动条样式
- 设置自定义垂直滚动条 这是用户在网站上与之交互最频繁的滚动条类型。垂直滚动条非常常见，因为浏览器为所有网站设置了默认垂直滚动条。除了默认滚动条外，您还可以在您的网站内设置自定义垂直滚动条。垂直滚动条可以帮助您的网站用户查看超出容器可见区域的内容。例如，侧边栏导航。您可以设计您的侧边栏以显示可滚动的导航项目列表。
在本节中，我们将按照以下步骤创建一个可滚动的侧边栏导航：
a）创建带有导航项目的导航栏
b）将导航栏样式设置为侧边栏
c）将侧边栏位置设置为固定
d）使用滚动条管理项目的溢出
a). 创建带有导航项目的导航栏
为了创建导航栏，我们将使用HTML nav元素。我们的导航栏将包含以下项目：
主页
商店
市场
产品
卖家
制造商
分销商
连锁经理
银行
我们在这一步的目标是创建一个如下截图所示的导航栏：
导航栏
可以使用下面的代码片段创建上述项目的初始导航栏：
<style>
a{
padding: 1rem;
color: rgb(38, 103, 216);
text-decoration: none;
}
</style>
<body>
<nav>
<a>主页</a>
<a>商店</a>
<a>市场</a>
<a>产品</a>
<a>卖家</a>
<a>制造商</a>
<a>分销商</a>
<a>连锁经理</a>
<a>银行</a>
</nav>
</body>b). 将导航栏样式设置为侧边栏。
创建水平导航栏后，我们可以在设置垂直滚动条之前将其样式设置为垂直侧边栏。
下面的截图显示了我们即将创建的侧边栏：
侧边栏
要创建上面的侧边栏，我们将在CSS中进行以下更改：
将导航栏的显示更改为flex，并将方向设置为column
为侧边栏设置背景颜色
为导航链接添加底部边框
增加导航链接的字体大小和字体粗细
为侧边栏设置固定宽度
增加body的高度以使其足够长以滚动
以下CSS代码片段描述了如何将初始导航栏样式设置为侧边栏并调整body的底部边距。
nav{
display: flex;
flex-direction: column;
background-color: rgba(0
, 0, 0, 0.1);
width: 20vw; // 为侧边栏设置固定宽度
> a{
border-bottom: solid 2px gray;
font-weight: 500;
font-size: 1.8rem;
}
}
body{
margin-bottom: 200vh; // 调整body的底部边距
}c). 将侧边栏位置设置为固定。
在本节中，我们将专注于防止侧边栏在滚动主要内容时移动。我们希望将侧边栏样式设置为固定位置，以便主体可以自行滚动而不带上侧边栏。
下面的截图显示了侧边栏与正常内容流分开：
固定溢出的侧边栏
上面的侧边栏具有固定位置。页面的正文继续滚动，但侧边栏保持在用户的视图中。
以下代码片段包含了将侧边栏设置为固定位置的样式，如上述截图所示。
nav{
/* 先前的样式在这里 */
position: fixed;
top: 4rem;
bottom: 4rem;
left: 0;
}在上面的代码片段中，我们将侧边栏距离顶部和底部的距离设置为4rem。从截图中可以看出，侧边栏的底部看起来不像设置在底部。这是因为内容比其容器的高度长。在下一节中，我们将学习如何防止导航项目列表显示在侧边栏之外。
d). 使用滚动条管理内容溢出
防止导航项目显示在侧边栏之外非常简单。只需使用一行CSS代码即可完成此操作，该行代码使用overflow-y属性。将overflow-y属性设置为scroll会为超出其高度的内容创建一个可滚动的容器。超出侧边栏范围的项目将被隐藏。右侧会出现一个滚动条，允许您的网站用户查看所有内容。
可滚动的侧边栏
隐藏扩展内容并显示侧边栏的代码片段如下所示：
nav{
/* 先前的样式在这里 */
overflow-y: scroll;
}关于overflow-y属性的更多信息。
overflow-y属性接受两个值之一：scroll或auto。将属性的值设置为scroll会指示浏览器始终向容器添加滚动条。无论目标容器是否有超出其边界的内容，容器始终会有一个滚动条。另一方面，如果将overflow-y属性的值设置为auto，则浏览器只有在目标容器有超出内容时才会添加滚动条。将overflow-y属性的值设置为auto后，如果没有内容超出容器的边界，浏览器将隐藏滚动条。
恭喜您！您已成功创建了一个垂直滚动条。如果需要的话，可以休息一下。在下一节中，我们将学习如何设置水平滚动条。
- 设置自定义水平滚动条。 您可以向网页内的容器添加水平滚动条。水平滚动条可以使用户在较短的容器内查看一系列横向内容。
下面的截图显示了一个橙色容器，其中包含一系列蓝色正方形，这些正方形的宽度超出了容器的宽度。如果容器具有水平滚动条，它会看起来更好。
溢出的flexbox
以下是上述布局的代码片段：
<style>
.container{
display: flex;
flex-direction: row;
width: 60%;
margin: auto;
margin-block-end: 6rem;
gap: .5rem;
padding: 1rem;
background-color: rgb(226, 150, 9);
}
.box{
min-width: 200px;
height: 200px;
background-color: rgb(0, 255, 213);
width: 100%;
padding: 4rem;
font-size: xx-large;
}
</style>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
</body>页面在屏幕左下角有一个默认的水平滚动条，但您不希望网站的用户使用它。依赖默认滚动条意味着用户必须水平滚动整个页面才能查看完整的内容。用户还将滚动不需要滚动的内容。
您的目标是确保蓝色正方形只能在橙色容器内查看，如下图所示。
可滚动的容器
在上一节中，我们通过将overflow-y属性的值设置为scroll来添加滚动条。您可以猜到这将是什么。你猜对了。属性名叫overflow-x。
将overflow-x属性的值设置为scroll可以将水平滚动条添加到容器的底部。您的网站用户将能够平稳地滚动容器中的内容。
您已成功创建了水平和垂直滚动条。让我们继续下一节，我们将讨论如何设置滚动条的样式。
- 自定义滚动条样式 您希望为网站的滚动条设置样式
的原因之一是为了在整个网页上实现颜色协调。您可能希望将在网站上使用的颜色数量保持在一组最小值。您还可以希望使用不同的颜色来设置滚动条，以便更容易注意到它。
在样式滚动条时，我们可以为以下属性设置所需的值：
width - 垂直滚动条的厚度
height - 水平滚动条的厚度
scrollbar-thumb的背景颜色 - 随着滚动而来回移动的对象
scrollbar-track的背景颜色 - scrollbar-thumb移动的路径
scrollbar-track，或scrollbar-thumb，或两者的border-radius。border-radius属性使得滚动条组件的极端端点更加平滑。
在本节中，我们将探讨以下几种样式滚动条的不同方法：
a) 样式特定的滚动条。
b) 分别为默认滚动条设置样式。
c) 一次性样式所有滚动条
a). 样式特定的滚动条。
有一种简单的方法可以为网站上的不同滚动条设置特定样式。这涉及通过设置滚动条的容器来添加样式。您可以通过标签名称或类名称选择容器并向其分配样式。
在本节中，我们将分别为垂直滚动条（侧边栏滚动）和水平滚动条（flexbox滚动）设置样式。
样式垂直滚动条（侧边栏滚动）
我们将在侧边栏（垂直）滚动条上设置以下样式。
将scrollbar-track的背景颜色设置为蓝色
将scrollbar-thumb的背景颜色设置为绿色
将滚动条的宽度（厚度）设置为12px
将scrollbar-track和scrollbar-thumb的border-radius设置为12px。
我们要创建的结果如下截图所示：
样式化的垂直滚动条
下面的代码片段描述了如何实现上述结果的样式：
nav::-webkit-scrollbar{
width: 12px;
}
nav::-webkit-scrollbar-track{
background-color: rgb(21, 146, 171);
border-radius: 12px;
}
nav::-webkit-scrollbar-thumb{
background-color: rgb(31, 125, 2);
border-radius: 12px;
}在上述代码片段中，我们使用nav标签选择了侧边栏。
样式化水平滚动条（flexbox滚动）
样式化水平滚动条与样式化垂直滚动条类似，只是一个属性不同。高度属性用于设置水平滚动条的厚度，而不是宽度属性。
在本练习中，我们将重用以前的样式，但将使用高度来设置滚动条的厚度，如下所述：
将scrollbar-track的背景颜色设置为蓝色
将scrollbar-thumb的背景颜色设置为绿色
将滚动条的高度（厚度）设置为12px
将scrollbar-track和scrollbar-thumb的border-radius设置为12px。
应用上述样式后，最终的flexbox容器滚动条应如下所示。
样式化的水平滚动条
以下是自定义水平滚动条的代码片段：
.container::-webkit-scrollbar{
height: 12px;
}
.container::-webkit-scrollbar-track{
background-color: rgb(21, 146, 171);
border-radius: 12px;
}
.container::-webkit-scrollbar-thumb{
background-color: rgb(31, 125, 2);
border-radius: 12px;
}在上述样式中，我们使用其类名选择了flexbox。
b). 为默认滚动条设置样式
默认滚动条出现在网页的右侧。要为默认滚动条设置样式，我们选择body标签并向其添加样式。
下面的截图显示了具有自定义样式的默认滚动条：
样式化的默认滚动条
下面的代码片段显示了如何使用body标签为滚动条添加样式：
body::-webkit-scrollbar{
width: 12px;
}
body::-webkit-scrollbar-track{
background-color: rgb(21, 146, 171);
border-radius: 12px;
}
body::-webkit-scrollbar-thumb{
background-color: rgb(31, 125, 2);
border-radius: 12px;
}c). 一次性样式所有滚动条。
在大多数情况下，您可能希望在整个网站的所有垂直和水平滚动条上保持一致的样式。
为了实现所有滚动条的统一定制，我们可以按如下方式应用样式：
在不选择任何特定元素、标签或类名的情况下应用滚动条样式
在网站同时具有水平和垂直滚动条的情况下，为两个属性的height和width同时赋值
。
以下代码片段描述了如何一次性地应用滚动条样式到整个网站的所有滚动条。
::-webkit-scrollbar{
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track{
background-color: rgb(21, 146, 171);
border-radius: 12px;
}
::-webkit-scrollbar-thumb{
background-color: rgb(31, 125, 2);
border-radius: 12px;
}上述代码片段中的两个选择器（::-webkit-scrollbar和::-webkit-scrollbar-track）不需要与任何特定的元素相关联。这意味着它们将适用于整个网站的所有滚动条。
我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
