先说一下背景,我在使用了 overflow-x: scroll 之后,发现页面可以滚动但是始终不显示滚动条,需求是让滚动条显示,以下代码是重新设置滚动条样式,在这里记录一下方便以后学习使用
.rankBox{
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.rankBox::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0);
border-left: 1px solid rgba(0, 0, 0, 0);
}
.rankBox::-webkit-scrollbar {
display: block;
width: 5px;
height: 10px;
-webkit-margin-bottom-collapse: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rankBox::-webkit-scrollbar-thumb {
background-color: #03bf7f;
background-clip: padding-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 28px;
}
.rankBox::-webkit-scrollbar-thumb:hover {
background-color: #e6e6e6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}