【CSS】动态修改浏览器滚动条宽度

完整源码

css 复制代码
.container {
	  overflow: auto;
	  scrollbar-color: auto !important;
	  
	  &::-webkit-scrollbar {
	      background-color: transparent;
	      border-radius: 6px
	  }
	
	  &::-webkit-scrollbar:vertical {
	      width: 12px;
	      height: 8px
	  }
	
	  &::-webkit-scrollbar:horizontal {
	      width: 8px;
	      height: 12px
	  }
	
	  &::-webkit-scrollbar-thumb {
	      border-radius: 6px;
	      border: 4px solid transparent;
	      background-color: #ccc;
	      background-clip: content-box
	  }
}

在线效果演示

欢迎 Star 👏🏻 github 地址

原理分析

✅ 自定义 WebKit 滚动条(Chrome/Safari)

css 复制代码
&::-webkit-scrollbar {
  background-color: transparent;
  border-radius: 6px;
}
  • 设置滚动条背景为透明。
  • 添加圆角(但这对整个滚动条轨道的圆角支持较有限)。
css 复制代码
&::-webkit-scrollbar:vertical {
  width: 12px;
  height: 8px;
}
  • 垂直滚动条宽度为 12px。
  • height 对垂直滚动条其实无效,写了也不会生效。
css 复制代码
&::-webkit-scrollbar:horizontal {
  width: 8px;
  height: 12px;
}
  • 水平滚动条高度为 12px。
  • width 对水平滚动条其实无效,写了也不会生效。

⚠️ 注意:width 和 height 实际只有一个维度起作用,另一个是冗余的。

✅ 滚动条滑块(thumb)样式

css 复制代码
&::-webkit-scrollbar-thumb {
  border-radius: 6px;
  border: 4px solid transparent;
  background-color: #ccc;
  background-clip: content-box;
}
  • border-radius: 6px:让滑块圆角化。
  • border: 4px solid transparent:滑块周围加上透明边框。
  • background-color: #ccc:滑块主体颜色为浅灰色。
  • background-clip: content-box:让背景颜色只应用于实际内容区域(不覆盖透明边框),形成"内缩"效果,让滑块看起来更细。

在线效果演示

欢迎 Star 👏🏻 github 地址

相关推荐
百花~22 分钟前
前端三剑客之一 HTML~
前端·html
lang201509281 小时前
Spring远程调用与Web服务全解析
java·前端·spring
listhi5203 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木3 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊3 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost4 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns4 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年5 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴5 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心5 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc