CSS自定义浏览器滚动条样式完整代码_Css

css自定义浏览器滚动条样式指南

在现代网页设计中，细节决定成败。滚动条作为用户与页面交互的重要组成部分，其样式往往被忽视。本文将详细介绍如何使用css自定义浏览器滚动条的样式，帮助你提升网站的视觉效果和用户体验。

1. 隐藏滚动条的角落

如果你希望隐藏滚动条的角落部分，可以使用以下css代码：

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  width: 0;
}

::webkit-scrollbar-corner 伪元素用于设置滚动条的角落部分（即滚动条的交角处）。
设置 width: 0; 会使滚动条的角落部分不可见。

2. 设置滚动条的基本样式

要设置滚动条的基本样式，可以使用以下css代码：

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: transparent;
}

::webkit-scrollbar 伪元素用于设置整个滚动条的样式。
width: 16px; 和 height: 16px; 设置滚动条的宽度和高度。
background: transparent; 设置滚动条的背景颜色为透明。

3. 设置滚动条轨道的样式

要设置滚动条轨道的样式，可以使用以下css代码：

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-left: 1px solid rgba(244, 244, 244, 0.14);
}

::webkit-scrollbar-track 伪元素用于设置滚动条轨道的样式。
background: #f5f5f5; 设置滚动条轨道的背景颜色为浅灰色。
border-left: 1px solid rgba(244, 244, 244, 0.14); 在轨道的左侧添加一条细边框，颜色为淡灰色，透明度为 0.14。

4. 设置滚动条滑块的样式

要设置滚动条滑块的样式，可以使用以下css代码：

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: #d2d2d2;
}

::webkit-scrollbar-thumb 伪元素用于设置滚动条滑块的样式。
border-radius: 8px; 设置滑块的圆角半径为 8px，使其看起来更加圆润。
border: 4px solid transparent; 在滑块周围添加一个 4px 宽的透明边框，这会使得滑块的实际可见部分变小。
background-clip: content-box; 使背景颜色仅填充到内容区域，不包括边框部分。
background-color: #d2d2d2; 设置滑块的背景颜色为深灰色。

5. 完整代码

以下是完整的css代码示例，涵盖了上述所有样式设置：

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  width: 0;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: transparent;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-left: 1px solid rgba(244, 244, 244, 0.14);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: #d2d2d2;
}