修改滚动条

  • html
<div class="kfList">
    <li>
        <span data-id="121231">哈傻傻的</span><div>VIP卡业务、业务审核进度、联系方式查询、保险查询、产品咨询、通告、促销活动、投诉及建议</div>
    </li>
    <li>
        <span data-id="121231">哈傻傻的1</span><div>VIP卡业务、业务审核进度、联系方式查询、保险查询、产品咨询、通告、促销活动、投诉及建议</div>
    </li>
    <li>
        <span data-id="121231">哈傻傻的2</span><div>VIP卡业务、业务审核进度、联系方式查询、保险查询、产品咨询、通告、促销活动、投诉及建议</div>
    </li>
    <li>
        <span data-id="121231">哈傻傻的4</span><div>VIP卡业务、业务审核进度、联系方式查询、保险查询、产品咨询、通告、促销活动、投诉及建议</div>
    </li>
</div>
  • 修改前css
.kfList{
    width: 314px;
    height: 238px;
    display: block;
    margin: 0 auto;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(235, 235, 235, 1);
    border-radius: 4px;
    -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    font-family: '微软雅黑 Regular', '微软雅黑';
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #666666;
    line-height: 18px;
    padding: 10px;
    overflow-y: scroll;
}

.kfList li{
    margin: 10px 0px;
}
.kfList li span{
    color:blue;
    font-size: 16px;
    text-decoration: underline;
    margin-bottom: 10px;
    cursor: pointer;
}
.kfList li div{
    margin-top: 10px;
}
        
  • 修改前

  • 修改后css
/*滚动条样式*/
.innerbox::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
.innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
  • 修改后


扫描二维码,在手机上阅读!