前端修改滚动条样式

纯css修改默认滚动条的样式

 1 &::-webkit-scrollbar {
 2   // 滚动条的背景
 3   width: 16px;
 4   background: #191a37;
 5   height: 14px;
 6 }
 7  
 8 &::-webkit-scrollbar-track,
 9 &::-webkit-scrollbar-thumb {
10   border-radius: 999px;
11   width: 20px;
12   border: 5px solid transparent;
13 }
14  
15 &::-webkit-scrollbar-track {
16   box-shadow: 1px 1px 5px #191a37 inset;
17 }
18  
19 &::-webkit-scrollbar-thumb {
20   //滚动条的滑块样式修改
21   width: 20px;
22   min-height: 20px;
23   background-clip: content-box;
24   box-shadow: 0 0 0 5px #464f70 inset;
25 }
26  
27 &::-webkit-scrollbar-corner {
28   background: #191a37;
29 }

下边这个很精简。值得一试

 1 &::-webkit-scrollbar {
 2   width: 6px;
 3   height: 6px;
 4   background: transparent;
 5 }
 6  
 7 &::-webkit-scrollbar-thumb {
 8   background: transparent;
 9   border-radius: 4px;
10 }
11  
12 &:hover::-webkit-scrollbar-thumb {
13   background: hsla(0, 0%, 53%, 0.4);
14 }
15  
16 &:hover::-webkit-scrollbar-track {
17   background: hsla(0, 0%, 53%, 0.1);
18 }

这个的优点在于 鼠标移上才会显示修改的滚动条 体验很好

（提示下 隐藏某轴的滚动条代码写法）

1 overflow-x:hidden;

 

转自：脚本之家 - 前端项目修改默认滚动条样式(小结)

 

posted @ 2021-10-11 09:42  自在逍遥处  阅读(1038)  评论(0)  编辑  收藏  举报