CSS SNIPPET

  返回

滚动条样式自定义  视觉效果

在WebKit平台上自定义文档和可滚动元素的滚动条样式。

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);
}
效果演示

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?

代码说明
  1. ::-webkit-scrollbar 选中整个滚动条元素。
  2. ::-webkit-scrollbar-track 仅选中滚动条轨道。
  3. ::-webkit-scrollbar-thumb 选中滚动条滑块。

有很多其他的伪元素可以用来设置滚动条的样式。要查看更多信息,访问WebKit官方博客

浏览器支持

97.7%

⚠️ 滚动条的样式定义目前没有标准化的迹象。