CSS 视觉 - 自定义滚动条

本贴最后更新于 323 天前,其中的信息可能已经时移俗易

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

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    433 引用 • 366 回帖 • 8 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    146 引用 • 399 回帖 • 1 关注
回帖
请输入回帖内容...