大家好，欢迎来到IT知识分享网。

1、滚动条隐藏

背景/场景：在移动端，滑动的时候，会显示默认滚动条，如图1:

//隐藏代码： /*隐藏滚轮*/ .ul-scrool-box::-webkit-scrollbar, .ul-scrool-box ul::-webkit-scrollbar { display: none; } 

2、滚动条美化

//美化代码---可以直接搬走：且一般只需要变动2处，变动地方1/2 /* 滚动条样式 */ .task-scrollbarsl { padding-right: 10px; overflow-y: scroll; } .task-scrollbarsl::-webkit-scrollbar { /*滚动条整体样式*/ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .task-scrollbarsl::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; box-shadow: inset 0 0 5px rgba(110,74,237,0.3);//为了和主题一直，变动地方1 //***#c1c1c1的话，和浏览器就一致了 background: #fff;//修改成**#c1c1c1 } .task-scrollbarsl::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.2);//**#e8e8e8 border-radius: 10px; background: rgba(110,74,237,0.7); //为了和主题一直，变动地方2 //**#e8e8e8 } /* 滚动条美化end */ //** 的4处变动，是为了和浏览器的滚动条保持一致