滚动条是 UI 元素，允许用户浏览不完全适合可见区域的长内容。它们由带有可拖动拇指的垂直或水平条组成，使用户能够上下或左右移动内容。

在不同的浏览器和设备中测试滚动条样式以确保它是非常重要的按预期工作。

如何设置滚动条样式

  • 创建一个容器元素（例如 div）来保存内容和滚动条。

  • 将容器元素的高度设置为固定值。

  • 为容器元素添加overflow: auto属性启用滚动条。

  • 使用 :-webkit-scrollbar 伪元素设置滚动条样式.

  • 使用 CSS 属性（宽度、高度、背景颜色、边框、边框半径）自定义滚动条。

CSS 滚动条

以下示例演示如何使用 -webkit-scrollbar CSS 伪元素创建基本滚动条 -

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      scrollbar-color: #8b8484 #ddd; 
      scroll-margin-block-end: 20px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      background: #f1f1f1; 
   }
   div::-webkit-scrollbar-thumb {
      background: #888; 
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #555; 
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div>
      <h3>滚动条使用 -webkit-scrollbar</h3>
      CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 
   </div>
</body>
</html>

CSS 滚动条: 带样式

以下示例演示如何使用 -webkit-scrollbar 伪元素设置滚动条样式，通过添加颜色、宽度、边框和边框半径来自定义其外观 -

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      background: #90e9e4;
   }
   div::-webkit-scrollbar-thumb {
      background: #e77f7f;
      border-radius: 10px;
      border: 3px solid yellow;
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #da3e3e; 
   }
   .heading{
      color: #DC4299;
      text-align: center;
   }
</style>
</head>
<body>
   <div>
      <h3 class="heading">滚动条使用 -webkit-scrollbar</h3>
      CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 
   </div>
</body>
</html>

CSS 滚动条: 相关属性

以下是与滚动条相关的 CSS 属性列表:

属性值
overflow-block确定当元素太宽而无法放入容器时其内容的行为方式。
overflow-inline确定内容溢出左右边缘时的显示方式。
overflow-x显示溢出的内容水平方向。
overflow-y垂直显示溢出内容。
overflow在垂直方向显示溢出内容。
overflow-clip-margin确定元素内容的距离可以在被剪切之前溢出其框。
scrollbar-color集滚动条的颜色。
scrollbar-width设置宽度。
scrollbar-gutter为滚动条预留空间
scroll-behavior确保用户滚动时平滑滚动单击链接或滚动页面。
scroll-margin定义捕捉区域内元素的边距。
scroll-padding定义捕捉区域内元素的边距。
scroll-snap-align 指定元素如何在其滚动容器内对齐。
scroll-snap- stop在捕捉点处停止滚动容器。
scroll-snap-type指定滚动容器如何捕捉到捕捉位置。
:-webkit-scrollbar以多种方式设置滚动条样式。