自定义滚动条的实现
以div滚动条为示例
HTML代码:
<div class="tab-details">
<div>内容1 制作基础优势</div>
<div>内容2 规划或目标</div>
<div>内容3 重点项目</div>
</div>
css代码:
.tab-details{
width: 100%;
height: calc(100% - 40px);
overflow-y: auto;
}
.tab-details::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);
border-radius:10px;
background-color:rgba(255,255,255,0);
}
.tab-details::-webkit-scrollbar {
width:5px;
background-color:rgba(255,255,255,0);
}
.tab-details::-webkit-scrollbar-thumb {
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);
background-color: rgba(216,241,255,1);
}
实现效果如下: