跳到主要内容位置

使用纯 CSS 自定义滚动条样式

使用纯 CSS 设置滚动条样式。无论你是在工作中遇到这个需求,还是想给自己的网站添加个性化元素,这个视频都可以帮到你。

先看最常用的、非标准化的 CSS 设置方式。在以 webkit 为核心的浏览器中,(如 Chrome、新 Edge)我们可以通过 ::-webkit-scrollbar 设置滚动条的样式:

::-webkit-scrollbar {
width: 3px;
background: linear-gradient(
to bottom,
hsl(0deg, 100%, 50%, 0.4) 0%,
hsl(40deg, 100%, 50%) 20%,
hsl(80deg, 100%, 50%) 30%,
hsl(120deg, 100%, 50%) 40%,
hsl(180deg, 100%, 50%) 50%,
hsl(250deg, 100%, 50%) 80%,
hsl(320deg, 100%, 50%, 0.4) 100%
);
border-radius: 4px;
}

通过 ::-webkit-scrollbar-thumb 设置滚动条滑动块的样式:

body::-webkit-scrollbar-thumb {
background: linear-gradient(
to bottom,
hsl(0deg, 100%, 50%, 0) 0%,
hsl(0deg, 100%, 100%, 0.9) 20%,
hsl(0deg, 100%, 100%, 0.9) 80%,
hsl(0deg, 100%, 50%, 0) 100%
);
border-radius: 100%;
}

这两个伪元素可以单独使用,设置全局滚动条样式,也可以在能够滚动的元素上设置(如设置了 scroll-y: always 的元素):

div::-webkit-scrollbar {
}
div::-webkit-scrollbar-thumb {
}

还有其它一些属性可以参考这个表格,但经过实测并没有太大用处:

属性作用
::-webkit-scrollbar-button滚动条的上下按钮样式。
::-webkit-scrollbar-track-piece除滑动块以外的滚动条部分的样式。
::-webkit-scrollbar-corner横、竖滚动条交界的角落区域样式。

也许是这个需求比较普遍,W3C 组织开始把滚动条相关的属性标准化了,目前还是草案阶段,标准化的滚动条样式属性,可以在能够滚动的元素中,使用 scrollbar-color 设置滚动条颜色,使用 scrollbar-width 设置滚动条宽度,可以取 thin 窄滚动条、auto 默认宽度,none 隐藏滚动条。 目前,草案只提供了这两个属性,后期可能会添加更多样式属性,目前这两个属性只有 firefox 浏览器支持。

body {
scrollbar-color: black;
scrollbar-width: thin | auto | none;
}

对于 IE,可以通过给滚动元素设置 scrollbar-track-color 来设置滚动条的背景色,使用 scrollbar-face-color 来设置滑动块的颜色:

body {
scrollbar-face-color: #00ff00;
scrollbar-track-color: #ff0000;
}

还有更多属性,有兴趣的可以自己研究一下:

  • scrollbar-3dlight-color
  • scrollbar-highlight-color
  • scrollbar-track-color
  • scrollbar-arrow-color
  • scrollbar-shadow-color
  • scrollbar-dark-shadow-color

小结

好了,这个就是使用纯 CSS 设置滚动条样式的方法,你学会了吗?如果有帮助请三连,想学更多有用的前端开发知识,请关注峰华前端工程师,感谢观看!

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买