2019-07-20 描述 在有 WebKit 功能的浏览器中,为滚动属性为 overflow 的页面和元素定义他们滚动条的样式。 HTML Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla q ..

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
    1254557929-5a570728e504b_articlex.png

浏览器支持

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

返回总目录

每天 30 秒系列之 CSS

回帖
请输入回帖内容...