CSS 更改溢出滚动条

在 Web 应用程序中，当内容溢出包含它的元素时，会自动出现滚动条。默认情况下，这些滚动条的样式通常与系统相关，对应用程序的风格和要求可能不太合适。可以通过 CSS 风格规则来定制滚动条的样式和行为。

以下是一些用于更改溢出滚动条的 CSS 规则：

隐藏滚动条

可以使用以下 CSS 规则将滚动条隐藏：

/* 隐藏纵向滚动条 */
overflow-y: hidden;

/* 隐藏横向滚动条 */
overflow-x: hidden;

/* 隐藏所有滚动条 */
overflow: hidden;

更改滚动条样式

以下 CSS 规则可以更改滚动条的各个方面的样式：

/* 改变纵向滚动条的宽度，高度和背景颜色 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #f5f5f5;
}

/* 改变纵向滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 10px;
}

/* 改变横向滚动条滑块的样式 */
::-webkit-scrollbar-thumb:horizontal {
  background-color: #cccccc;
  border-radius: 10px;
}

/* 改变纵向滚动条滑块的样式，当用户沿着滚动条滑动时出现 */
::-webkit-scrollbar-thumb:hover {
  background-color: #888888;
}

/* 改变横向滚动条滑块的样式，当用户沿着滚动条滑动时出现 */
::-webkit-scrollbar-thumb:hover:horizontal {
  background-color: #888888;
}

/* 改变滚动条的按钮（上下箭头）的样式 */
::-webkit-scrollbar-button {
  background-color: #f5f5f5;
}

/* 改变滚动条的按钮的样式，当用户悬停于按钮上时 */
::-webkit-scrollbar-button:hover {
  background-color: #cccccc;
}

更改滚动行为

除滚动条本身的样式之外，以下 CSS 规则可以更改滚动的行为：

/* 禁止纵向滚动条自动隐藏 */
::-webkit-scrollbar {
  -webkit-appearance: none;
}

/* 以页面为单位而不是像素为单位滚动 */
body {
  scroll-behavior: smooth;
}

/* 使用横向滚动 */
.container {
  white-space: nowrap;
  overflow-x: auto;
}

更多关于 CSS 定制滚动条的内容，可以查看 MDN。