css修改滚动条样式(附上element-ui框架的表格滚动条样式修改)

2023年6月20日发(作者：)

css修改滚动条样式（附上element-ui框架的表格滚动条样式修改）css 修改滚动条样式注：本⽂样式仅⽀持⾕歌浏览器以及 Edge浏览器，⽕狐浏览器不⽀持，IE 浏览器好像不⽀持修改滚动条的⼤⼩（我没找到）只⽀持修改相关的颜⾊，所以IE浏览器在此便没有做演⽰，其他浏览器尚未测试。 样式可⾃⾏定义，本⽂展⽰的只是简洁的⼀个滚动条样式 初始滚动条样式 修改后简约版的滚动条样式 代码如下.box{ width: 200px; height: 300px; padding: 10px; border: 1px solid #ccc; overflow: auto; margin: 20px auto;}/*

设置滚动条的⼤⼩ */.box::-webkit-scrollbar { width: 4px; /*

纵向滚动条的⼤⼩ */ height: 10px; /*

横向滚动条的⼤⼩ */}/*

设置滚动条可拖动滑块的样式 */.box::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}/*

设置外层轨道的样式 */.box::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1);}

 相关样式属性说明（详情查看图⽚，序号⼀⼀对应）1. ::-webkit-scrollbar 滚动条整体部分，可以设置 width, height, background, border 等2. ::-webkit-scrollbar-button 滚动条两端的按钮，可以设置 display:none 让其不显⽰，也可以添加背景图⽚、颜⾊改变其显⽰效果3. ::-webkit-scrollbar-track 外层轨道，可以设置 display:none 让其不显⽰，也可以添加背景图⽚、颜⾊改变其显⽰效果4. ::-webkit-scrollbar-track-piece 内层滚动槽5. ::-webkit-scrollbar-thumb 滚动的滑块，也就是可以⽤⿏标点击拖动的部分6. ::-webkit-scrollbar-corner 边⾓7. ::-webkit-resizer 定义右下⾓拖动块的样式。 附上element-ui框架的表格滚动条样式修改样式与开头图⽚⼀致，只是打开控制台找到对应元素修改滚动条样式⽽已；element-ui 其他元素容器的滚动条样式修改⼀样也是打开控制台找到对应元素进⾏修改；如项⽬中需要修改其他⾮ element-ui 元素容器的滚动条样式，可定义⼀个通⽤样式 class（如：.change-scrollbar），那么即可在需要修改滚动条的元素上定义该类。/*

改变element表格的滚动条样式 */.el-table__body-wrapper::-webkit-scrollbar { width: 4px; /*

纵向滚动条的⼤⼩ */ height: 10px; /*

横向滚动条的⼤⼩ */}.el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}.el-table__body-wrapper::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1);}   如有不⾜，望⼤家多多指点！ 谢谢！

2023年6月20日发(作者：)

css修改滚动条样式（附上element-ui框架的表格滚动条样式修改）css 修改滚动条样式注：本⽂样式仅⽀持⾕歌浏览器以及 Edge浏览器，⽕狐浏览器不⽀持，IE 浏览器好像不⽀持修改滚动条的⼤⼩（我没找到）只⽀持修改相关的颜⾊，所以IE浏览器在此便没有做演⽰，其他浏览器尚未测试。 样式可⾃⾏定义，本⽂展⽰的只是简洁的⼀个滚动条样式 初始滚动条样式 修改后简约版的滚动条样式 代码如下.box{ width: 200px; height: 300px; padding: 10px; border: 1px solid #ccc; overflow: auto; margin: 20px auto;}/*

设置滚动条的⼤⼩ */.box::-webkit-scrollbar { width: 4px; /*

纵向滚动条的⼤⼩ */ height: 10px; /*

横向滚动条的⼤⼩ */}/*

设置滚动条可拖动滑块的样式 */.box::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}/*

设置外层轨道的样式 */.box::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1);}

 相关样式属性说明（详情查看图⽚，序号⼀⼀对应）1. ::-webkit-scrollbar 滚动条整体部分，可以设置 width, height, background, border 等2. ::-webkit-scrollbar-button 滚动条两端的按钮，可以设置 display:none 让其不显⽰，也可以添加背景图⽚、颜⾊改变其显⽰效果3. ::-webkit-scrollbar-track 外层轨道，可以设置 display:none 让其不显⽰，也可以添加背景图⽚、颜⾊改变其显⽰效果4. ::-webkit-scrollbar-track-piece 内层滚动槽5. ::-webkit-scrollbar-thumb 滚动的滑块，也就是可以⽤⿏标点击拖动的部分6. ::-webkit-scrollbar-corner 边⾓7. ::-webkit-resizer 定义右下⾓拖动块的样式。 附上element-ui框架的表格滚动条样式修改样式与开头图⽚⼀致，只是打开控制台找到对应元素修改滚动条样式⽽已；element-ui 其他元素容器的滚动条样式修改⼀样也是打开控制台找到对应元素进⾏修改；如项⽬中需要修改其他⾮ element-ui 元素容器的滚动条样式，可定义⼀个通⽤样式 class（如：.change-scrollbar），那么即可在需要修改滚动条的元素上定义该类。/*

改变element表格的滚动条样式 */.el-table__body-wrapper::-webkit-scrollbar { width: 4px; /*

纵向滚动条的⼤⼩ */ height: 10px; /*

横向滚动条的⼤⼩ */}.el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}.el-table__body-wrapper::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1);}   如有不⾜，望⼤家多多指点！ 谢谢！