CSS 列表或块元素的垂直滚动条

在本文中，我们将介绍如何使用 CSS 实现列表或块元素的垂直滚动条效果。垂直滚动条允许我们在页面上显示过长的内容，并且通过滚动条来浏览内容。我们将使用 CSS 属性和一些示例来演示如何创建、自定义和控制垂直滚动条。

阅读更多：CSS 教程

创建垂直滚动条

要创建一个垂直滚动条，我们可以使用 CSS 的 overflow 属性。该属性控制元素在内容溢出时如何显示滚动条。overflow 属性有三个值：visible（默认值，内容溢出不会显示滚动条）、hidden（内容溢出会被隐藏）、scroll（内容溢出会显示滚动条）。

.container {
  overflow: scroll;
  height: 200px;
}

上述示例中，我们为一个名为 .container 的元素添加了 overflow: scroll 属性。当 .container 内容溢出时，将显示垂直滚动条。我们还为 .container 指定了一个固定的高度（200px），以限制内容的高度并触发垂直滚动条。

自定义滚动条样式

我们可以使用 CSS 属性和伪类选择器来自定义滚动条的样式。以下是一些用于自定义滚动条的常用属性：

scrollbar-width：定义滚动条宽度（支持的值为 thin、auto、none）；
scrollbar-color：定义滚动条的颜色（支持的值为 auto 或者自定义颜色）；
::-webkit-scrollbar：用于定制 WebKit 浏览器中滚动条样式的伪类选择器。

.container::-webkit-scrollbar {
  width: 10px;
}

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

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

上述示例中，我们使用 ::-webkit-scrollbar 来定制滚动条的宽度和样式。带有 ::-webkit-scrollbar-thumb 属性的选择器用于定义滚动条的背景颜色，带有 ::-webkit-scrollbar-track 属性的选择器用于定义滚动条轨道的背景颜色。

请注意，虽然这些 CSS 属性和伪类选择器更适用于 WebKit 浏览器（如 Chrome 和 Safari），但您可以使用不同的浏览器前缀来自定义其他浏览器中的滚动条样式。

控制滚动条行为

在某些情况下，我们可能想控制滚动条的行为，例如初始滚动位置、滚动速度等等。以下是一些可以使用的 CSS 属性：

scroll-behavior：定义滚动条的滚动行为（支持的值为 auto、smooth）；
scroll-snap-type：定义滚动条的捕捉类型（支持的值为 none、mandatory、proximity）；
scroll-padding：定义滚动条边距，以避免内容被滚动条遮挡。

.container {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px;
}

上述示例中，我们为 .container 元素添加了 scroll-behavior、scroll-snap-type 和 scroll-padding 属性。其中，scroll-behavior: smooth 将使滚动条具有平滑滚动的动画效果，scroll-snap-type: y mandatory 将使滚动条以垂直方向捕捉到特定的元素位置，scroll-padding: 50px 将在滚动时为内容添加一个边距，以避免被滚动条遮挡。