【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 地址

相关推荐
南屿im31 分钟前
别再被引用坑了!JavaScript 深浅拷贝全攻略
前端·javascript
想要一辆洒水车42 分钟前
vuex4源码分析学习
前端
sophie旭44 分钟前
一道面试题,开始性能优化之旅(6)-- 异步任务和性能
前端·javascript·性能优化
年少不知有林皇错把梅罗当球王1 小时前
vue2、vue3中使用pb(Base64编码)
前端
FanetheDivine1 小时前
常见的AI对话场景和特殊情况
前端·react.js
sophie旭1 小时前
一道面试题,开始性能优化之旅(5)-- 浏览器和性能
前端·面试·性能优化
lypzcgf1 小时前
Coze源码分析-资源库-编辑知识库-前端源码-核心组件
前端·知识库·coze·coze源码分析·智能体平台·ai应用平台·agent平台
小墨宝1 小时前
web前端学习 langchain
前端·学习·langchain
北城以北88881 小时前
Vue--Vue基础(一)
前端·javascript·vue.js
IT_陈寒2 小时前
Python 3.12新特性实战:5个让你的代码提速30%的性能优化技巧
前端·人工智能·后端