2023年6月20日发(作者:)
css横向、纵向滚动条注意:(滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 ⾼度,⽆法修改纵向滚动条⾼度、横向滚动条宽度数值只介绍Google浏览器滚动条样式,常⽤属性如下)::-webkit-scrollbar::-webkit-scrollbar-button::-webkit-scrollbar-track ::-webkit-scrollbar-track-piece::-webkit-scrollbar-thumb::-webkit-scrollbar-thumb:hover::-webkit-scrollbar-thumb:vertical:hover::-webkit-scrollbar-thumb:horizontal:hover::-webkit-scrollbar-corner
滚动条整体样式⼀设置滚动条样式,滚动条两端的按钮图标就消失,但可以重新设置图⽚、新样式外层轨道内层轨道,它会覆盖外层轨道 scrollbar-track 的样式滑块滑块悬浮纵向滑块悬浮横向滑块悬浮边⾓,两个滚动条交汇处注意:(滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 ⾼度,⽆法修改纵向滚动条⾼度、横向滚动条宽度数值)
1234567/* 1,滚动条 */::-webkit-scrollbar { width: 20px; /* 纵向滚动条 宽度 */ height: 15px; /* 横向滚动条 ⾼度 */ background: pink; /* 整体背景 */ border-radius: 10px; /* 整体 圆⾓ */}注意:滚动条两端的按钮也存在上述情况1234567/* 2,滚动条两端的按钮 */::-webkit-scrollbar-button{ width: 30px; /* 横向滚动条 宽度 */ height: 20px; /* 纵向滚动条 ⾼度 */ background: black; border-radius: 10px;}下图为⼀个实例,感兴趣的可以尝试,贴出源码1234
4567897282936373839464748495657585966676869