css---overflow自定义样式

 一、原始css的overflow   

       overflow : 用于内容展示时,内容过长,导致空间不足。 以下是菜鸟上的介绍以及例子,有兴趣的话可以先看看原始的。

      

    二、需求自定义overflow 

       因需求方需要做一个非原始css的滚动条,本身可能我们直接这样使用:overflow:auto,就可以完成内容过长的处理,但是原始的样式偏向于普通,不太符合有时候页面美观问题,所以我自定义了自己的overflow。  

.left-content{
   padding:  8px;
   width: 300px;
   height: 500px;
   overflow: auto;
}
/*滚动条高宽度*/
.left-content::-webkit-scrollbar{
    width: 8px;
    height: 4px;
}
/*滚动条滑块*/
.left-content::-webkit-scrollbar-thumb{
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #c7c4c4;
}
/*滚动条里面轨道*/
.left-content ::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;

}
/*滚动条的小边角*/
.left-content::-webkit-scrollbar-corner {
    background: transparent;
}

   

                                   

             

                                                                                                                                                                                

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值