css怎么加滚动条

1.介绍

滚动条是页面上的一个重要元素，它允许用户在页面上移动内容。CSS可以控制滚动条的样式和行为，因此，您可以自定义滚动条以适应您的设计。CSS3引入了一个新的属性，允许您完全自定义滚动条。CSS3滚动条属性包括：

scrollbar-width

scrollbar-color

scrollbar-gutter

使用这些属性，您可以改变滚动条的宽度、颜色和位置。

2.增加滚动条

默认情况下，当内容超出容器的大小时，浏览器将自动为您添加滚动条。可以使用CSS样式更改滚动条的样式和行为。

2.1 overflow属性

想要在一个区域中添加滚动条，必须设置它的overflow属性为scroll或auto。

.container {
  width: 400px;
  height: 200px;
  overflow: auto;
}

这个样式将使包含在.container中的任何内容都不会突破div的大小，并添加滚动条。如果内容没有超出容器的大小，那么滚动条就不会出现。

2.2 ::-webkit-scrollbar伪元素

您可以使用::-webkit-scrollbar伪元素来添加自定义滚动条样式。要使用伪元素，首先需要为overflow设置值scroll或auto。伪元素只在Webkit浏览器中起作用。

2.3 基本样式

使用CSS设置基本的滚动条样式。

.container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.container::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.container::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar选择器用于设置整个滚动条的宽度和高度。您可以使用::-webkit-scrollbar-track和::-webkit-scrollbar-thumb选择器分别设置滚动条轨道和滑块的样式。

::-webkit-scrollbar-track定义了滚动条背景的样式，而::-webkit-scrollbar-thumb定义了可以拖动的滑块的样式。

2.4 更准确的滚动条颜色

要控制滚动条的颜色，可以使用scrollbar-color属性。

.container::-webkit-scrollbar-thumb {
  background: #888;
  scrollbar-color: #888 #f1f1f1;
}

在此示例中，scrollbar-color定义了滑块的颜色以及滚动条的背景色。第一个值是滑块的颜色，第二个值是滚动条轨道的颜色。

2.5 控制滚动条宽度

要控制滚动条的宽度，可以使用scrollbar-width属性。

.container::-webkit-scrollbar {
  height: 10px;
  width: 20px;
  scrollbar-color: #888 #f1f1f1;
  scrollbar-width: thin;
}

在此示例中，scrollbar-width属性设置为thin。您还可以将其设置为auto、none或像素值。

2.6 隐藏滚动条

要隐藏滚动条，请将scrollbar-width属性设置为none。

.container::-webkit-scrollbar {
  height: 0;
  width: 0;
  scrollbar-width: none;
}

在此示例中，滚动条完全被隐藏，内容将填充.container元素。

3.总结

通过overflow属性以及::-webkit-scrollbar伪元素，我们可以创建自定义滚动条样式。使用scrollbar-color和scrollbar-width属性可以控制滚动条的颜色和宽度。