滚动条隐藏及美化_如何显示滚动条的显示与隐藏
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处变动,是为了和浏览器的滚动条保持一致