滚动条 - CSS

简介

滚动条是网页开发中常用的组件之一，它提供了在较小区域中显示大量内容的功能。滚动条的样式和行为可以通过 CSS 进行定制化。

基础语法

显示滚动条

默认情况下，当内容溢出其容器时，浏览器会自动显示滚动条。

overflow: auto;

隐藏滚动条

如果希望隐藏滚动条，可以使用以下代码：

/* 隐藏垂直滚动条 */
overflow-y: hidden;

/* 隐藏水平滚动条 */
overflow-x: hidden;

更改滚动条颜色

可以通过 ::-webkit-scrollbar 伪元素来更改滚动条的颜色、宽度和样式。

/* 设置竖直滚动条的样式 */
::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

控制滚动条行为和样式

可以使用以下属性来控制滚动条的行为和样式：

• scrollbar-width：控制滚动条宽度。
• scrollbar-color：控制滚动条滑块颜色和背景色。

/* 设置滚动条的宽度和颜色 */
body {
  scrollbar-width: thin;
  scrollbar-color: #888 #f5f5f5;
}

示例

以下是一个滚动条样式的示例：

/* 设置滚动条的宽度和颜色 */
body {
  scrollbar-width: thin;
  scrollbar-color: #888 #f5f5f5;
}

/* 设置竖直滚动条的样式 */
::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

参考链接

• MDN Web 文档：滚动条