技术资讯:CSS滚动条样式修改,最新方式!

大家好,我是大澈!

本文约800+字,整篇阅读大约需要1分钟。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

1. 资讯速览

从 Chrome 版本 2 开始,我们可以使用 ::-webkit-scrollbar-* 伪元素设置滚动条的样式。

于是,便有了以下几种伪元素:

这种方法在 Chrome 和 Safari 中很有效,但 CSS 工作组从未将其标准化。

但从 Chrome 121 开始,系统全面支持标准化的 scrollbar-widthscrollbar-color 属性,用来简化滚动条样式的修改。

2. 资讯详细

先详细聊聊 scrollbar-widthscrollbar-color 这两个属性,再说说对旧版浏览器的处理和推荐写法,最后做小结。

2.1 两个属性详细

scrollbar-color 可以定义滚动条的颜色,语法如下:

css 复制代码
scrollbar-color: auto | 滑杆颜色 轨道颜色;

scrollbar-width 可以设置滚动条的宽度,不过这个宽度不能随意指定,是有约束的,语法如下所示:

css 复制代码
scrollbar-width: auto | thin | none;
  • auto 就是默认的尺寸,在 Windows 系统下是 17px;
  • thin 是窄滚动条,在 Windows 系统下是 8px;
  • none 没有滚动条,宽度为0,但是内容依然可以滚动。

2.2 旧版浏览器支持

为了适应不支持 scrollbar-colorscrollbar-width 的浏览器旧版本,您可以同时使用新的 scrollbar-*::-webkit-scrollbar-* 属性。

同时,在 Chrome 121 版本之后,继续使用 ::-webkit-* 伪元素可能会导致样式与预期不符,所以即便是新版本浏览器,也推荐使用如下写法!

css 复制代码
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

2.3 小结

从 Chrome 121 开始,系统全面支持标准化的 scrollbar-widthscrollbar-color 属性,用来简化滚动条样式的修改。

结语

建立这个平台的初衷:

  • 打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。
  • 遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。
  • 平台现拥有功能问题、技术资讯、实用干货3个专栏内容。

感谢关注微信公众号:"程序员大澈",免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

相关推荐
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~9 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安11 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
啃火龙果的兔子11 小时前
react19+nextjs+antd切换主题颜色
前端·javascript·react.js
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序