CSS 视觉 - 自定义滚动条

2019-07-20

描述

在有 WebKit 功能的浏览器中，为滚动属性为 overflow 的页面和元素定义他们滚动条的样式。

HTML

<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>
​

CSS

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}
/* To style the document scrollbar, remove `.custom-scrollbar` */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
​

Demo

说明

1. ::-webkit-scrollbar 为整个滚动条元素
2. ::-webkit-scrollbar-track 为滚动条上的轨道
3. ::-webkit-scrollbar-thumb 为滚动条轨道上可拖着进行滚动的元素
4. 滚动条样式中还有很多其他你可以使用的伪元素，更多信息可参见 WebKit Blog
   

浏览器支持

支持率：90.7%
支持情况：https://caniuse.com/#feat=css-scrollbar
⚠️： 滚动条的样式在任何标准属性中都无法显示

返回总目录

每天 30 秒系列之 CSS