[分享]css做一个滚动条

滚动条是 Web 页面常用的交互效果之一，为了让用户更加方便地浏览长内容的页面，我们可以使用 CSS 来实现一个漂亮、简洁的滚动条。 / 创建自定义样式的滚动条 / ::webkitscrollbar...

滚动条是 Web 页面常用的交互效果之一，为了让用户更加方便地浏览长内容的页面，我们可以使用 CSS 来实现一个漂亮、简洁的滚动条。

/* 创建自定义样式的滚动条 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 滚动条高度 */
}
 
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #aaa; /* 滑块颜色 */
  border-radius: 4px; /* 边框半径 */
}
 
/* 鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 滑块悬停颜色 */
}
 
/* 滚动条背景 */
::-webkit-scrollbar-track {
  background-color: #eee; /* 滚动条背景颜色 */
  border-radius: 4px; /* 边框半径 */
}
 
/* 鼠标悬停时的滚动条背景 */
::-webkit-scrollbar-track:hover {
  background-color: #ddd; /* 滚动条背景颜色 */
} 

以上代码创建了一个自定义样式的滚动条，其中 ::-webkit-scrollbar 为滚动条本身的样式，::-webkit-scrollbar-thumb 为滑块的样式，::-webkit-scrollbar-track 为滚动条背景的样式。

这里使用的是 ::-webkit-scrollbar，因为 WebKit 浏览器是目前普遍使用的浏览器之一。如果需要兼容其他浏览器，可以使用以下样式：

/* Firefox */
scrollbar-width: thin;
scrollbar-color: #aaa #eee;
 
/* IE */
-ms-overflow-style: scrollbar;