Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步