css 自定义滚动条

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

HTML

<div class="custom-scrollbar">
  <p>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?</p>
</div>

CSS

/* Document scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}

说明

• ::-webkit-scrollbar 定位整个滚动条元素。
• ::-webkit-scrollbar-track 仅针对滚动条轨道。
• ::-webkit-scrollbar-thumb 瞄准滚动条拇指。