解决使用 overflow-x: scroll 滚动条不显示问题

藕粉桂花糖糖糕

于 2023-12-03 15:47:26 发布

阅读量913

点赞数 7

文章标签： css css3 html

本文链接：https://blog.csdn.net/lixiaosalalala/article/details/134765726

版权

先说一下背景，我在使用了 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;
}