滚动条样式优化

去除底部滚动条 overflow-x:hidden;

 

.tableCotian 为容器

/* 滚动条轨道*/
.tableContain::-webkit-scrollbar {
width: 10px;
height: 5px;
background-color: rgba(0,0,0,.3);
}

/*定义滑块 内阴影+圆角*/
.tableContain::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rgba(0,0,0,0.4);
}

/*定义滚动条轨道 内阴影+圆角*/
.tableContain::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: rgba(0,0,0,1);
display: none;
}

.tableContain::-webkit-scrollbar-track:hover
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
display:inline-block;
}

/*滑块效果*/
.tableContain::-webkit-scrollbar-thumb:hover
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}

转载于:https://www.cnblogs.com/RonnieQin/p/8024395.html