自定义滚动条的实现

自定义滚动条的实现

以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);
}

实现效果如下：