css之自定义滚动条

<div class="alertbox index-rulebox" style="display:none">
        <div class="index-alert-rule">
            <div class="rule-con">
                <p>(1)每天10:00、14:00、18:00、22:00整点开抢；</p>
                <p>(2)每次180份，限量限时抢购，抢完即止；</p>
                <p>(3)每次每人只能抢购1次，且需要消耗抢购次数；</p>
                <p>(4)如用户有任何舞弊、欺诈或违反平台规则的其他行为，将被取消本次活动参与资格；</p>
                <p>(5)活动期间，如进行退保等操作，则视为放弃本次活动奖品，如需申请请联系在线客服；</p>
                <p>(6)如有疑问请联系在线客服</p>
                <p class="rule-contit">参与次数获取攻略</p>
                <p>(1)每天10:00、14:00、18:00、22:00整点开抢；</p>
                <p>(2)每次180份，限量限时抢购，抢完即止；</p>
                <p>(3)每次每人只能抢购1次，且需要消耗抢购次数；</p>
                <p>(4)活动期间每签到2天参与次数+1。</p>
            </div>
            <div class="alert-closebtn"></div>
        </div>
    </div>

 

效果

html

 

css

/*移动端显示滚动条*/
.rule-con::-webkit-scrollbar {
    -webkit-appearance: none;
}
.rule-con::-webkit-scrollbar:vertical {
   width: .06rem;
}
.rule-con::-webkit-scrollbar:horizontal {
   height: .06rem;
}
.rule-con::-webkit-scrollbar-thumb {
   background-color: #78715a;
   border-radius: 10px;
}
.rule-con::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: #d8cca3;
}
.rule-con::-webkit-scrollbar-corner {
       background-color: #d8cca3;
} 
.rule-con p {
     width: 4.12rem;
}
.rule-con {
    height: 5.76rem;
    overflow: auto;
    font-size: .26rem;
    color: #d12f23;
    line-height: .34rem;
    margin: 1.26rem .6rem 0 .7rem;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;  //ios上平滑
}