样式设计

OverlayScrollbars 提供了两个主题，分别叫做 os-theme-dark 和 os-theme-light。你可以通过 scrollbars.theme 选项来更改主题。

自定义主题可以通过多种方式实现。最简单快捷的方式是使用预定义的一套 CSS 自定义属性，也就是 CSS 变量。如果这些预设的变量不能满足需求，你还可以为元素添加自定义的类名，或者对已有的类名添加额外的样式规则。

CSS Custom Properties

OverlayScrollbars 提供了一组 CSS 自定义属性（CSS Custom Properties），这使得滚动条的样式设计变得既简单又快捷：

.os-scrollbar {
  /* 滚动条的尺寸 */
  --os-size: 0;
  /* 滚动条与其轴垂直方向上的内边距（水平滚动条：padding-y，垂直滚动条：padding-x）*/
  --os-padding-perpendicular: 0;
  /* 沿轴方向的内边距（水平滚动条：padding-x，垂直滚动条：padding-y）*/
  --os-padding-axis: 0;
  /* 滚动条轨道的圆角边框 */
  --os-track-border-radius: 0;
  /* 滚动条轨道的背景色 */
  --os-track-bg: none;
  /* 滚动条轨道:hover状态的背景色 */
  --os-track-bg-hover: none;
  /* 滚动条轨道:active状态的背景色 */
  --os-track-bg-active: none;
  /* 滚动条轨道的边框 */
  --os-track-border: none;
  /* 滚动条轨道:hover状态的边框 */
  --os-track-border-hover: none;
  /* 滚动条轨道:active状态的边框 */
  --os-track-border-active: none;
  /* 滚动条手柄的圆角边框 */
  --os-handle-border-radius: 0;
  /* 滚动条手柄的背景色 */
  --os-handle-bg: none;
  /* 滚动条手柄:hover状态的背景色 */
  --os-handle-bg-hover: none;
  /* 滚动条手柄:active状态的背景色 */
  --os-handle-bg-active: none;
  /* 滚动条手柄的边框 */
  --os-handle-border: none;
  /* 滚动条手柄:hover状态的边框 */
  --os-handle-border-hover: none;
  /* 滚动条手柄:active状态的边框 */
  --os-handle-border-active: none;
  /* 滚动条手柄的最小尺寸 */
  --os-handle-min-size: 33px;
  /* 滚动条手柄的最大尺寸 */
  --os-handle-max-size: none;
  /* 滚动条手柄沿其轴垂直方向的尺寸（水平：高度，垂直：宽度）*/
  --os-handle-perpendicular-size: 100%;
  /* 滚动条手柄:hover状态沿轴垂直方向的尺寸（水平：高度，垂直：宽度）*/
  --os-handle-perpendicular-size-hover: 100%;
  /* 滚动条手柄:active状态沿轴垂直方向的尺寸（水平：高度，垂直：宽度）*/
  --os-handle-perpendicular-size-active: 100%;
  /* 增加滚动条手柄的交互区域 */
  --os-handle-interactive-area-offset: 0;
}

您可以同时修改适用于两个滚动条的属性，也可以按滚动条轴（横向和纵向）分别修改。在下面的例子中，我选择了 os-theme-custom 作为主题名称：

/* 自定义主题中，水平和垂直滚动条均为10px宽 */
.os-theme-custom {
  --os-size: 10px; /* 设置滚动条宽度为10px */
}

/* 自定义主题中，仅水平滚动条为10px宽 */
.os-theme-custom.os-scrollbar-horizontal {
  --os-size: 10px; /* 设置水平滚动条宽度为10px */
}

/* 自定义主题中，仅垂直滚动条为20px宽 */
.os-theme-custom.os-scrollbar-vertical {
  --os-size: 20px; /* 设置垂直滚动条宽度为20px */
}

然后，您可以通过 scrollbars.theme 选项分配您的主题来使用它：

OverlayScrollbars(document.body, {
  scrollbars: {
    theme: "os-theme-custom",
  },
});

由于滚动条样式通常较为简单，这一系列选项应该足以达到您想要的样式设计。如果您需要更大的自由度，可以通过为下一部分描述的基本类名添加样式来自行创建样式。

滚动条的结构与 `CSS` 类名

滚动条的 HTML 结构如下所示：

<div class="os-scrollbar os-scrollbar-horizontal">
  <div class="os-scrollbar-track">
    <div class="os-scrollbar-handle"></div>
  </div>
</div>
<div class="os-scrollbar os-scrollbar-vertical">
  <div class="os-scrollbar-track">
    <div class="os-scrollbar-handle"></div>
  </div>
</div>

类名经过了简化，在实际应用中，.os-scrollbar 元素可能还会有额外的类名，这些类名会修改其外观（主要是可见性和对齐方式）。

以下是最重要的一些你会遇到的类名列表：

CSS 类名	描述
`.os-scrollbar`	滚动条的根元素。
`.os-scrollbar-rtl`	表示滚动条所属宿主元素的方向为从右至左（RTL）。
`.os-scrollbar-horizontal`	水平滚动条的根元素。
`.os-scrollbar-vertical`	垂直滚动条的根元素。
`.os-scrollbar-handle-interactive`	表示滚动条内部的滚动柄是可交互的（即 `scrollbars.dragScroll` 设为 `true`）。
`.os-scrollbar-track-interactive`	表示滚动条内部的轨道是可交互的（即 `scrollbars.clickScroll` 设为 `true`）。用户可以点击此元素来改变滚动偏移。
`.os-scrollbar-track`	轨道元素。这是包含滚动柄元素的轨道。如果 `scrollbars.clickScroll` 为 `true`，这是用户可以点击以改变滚动偏移的元素。
`.os-scrollbar-handle`	滚动柄元素。如果 `scrollbars.dragScroll` 为 `true`，这是用户可以通过拖动来改变滚动偏移的滚动柄。

如果你创建自己的主题，请只使用上述列出的类名。所有其他类名都是修饰符类，用于改变滚动条的可见性、对齐方式和指针事件（pointer-events）。

注意事项

重要的是，你在 CSS 文件中选择的主题类名必须与选项中分配的主题名相匹配。如果 CSS 类名是 .my-theme，那么 scrollbars.theme 的值就必须是 'my-theme'。

请注意你的技术栈。例如，css-modules 会改变你的类名以防止命名冲突。总是要仔细检查你的 CSS 是否确实是你期望的样子。

样式设计

CSS Custom Properties

滚动条的结构与 CSS 类名

注意事项

在本文档中

滚动条的结构与 `CSS` 类名