CSS3自定义滚动样式

2018-06-24 00:57:57来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

css样式如下:

#div1{
  width:200px;
  height:400px;
  background:red;
  overflow:auto;
} #div1::-webkit-scrollbar{   width:5px;   height:5px; } #div1::-webkit-scrollbar-track{   background:hotpink; //轨道的样式 } #div1::-webkit-scrollbar-thumb{   background:deeppink; //滑动条的样式 } #div1::-webkit-scrollbar-thumb:hover{   background:palevioletred; //鼠标移到滑动条上滑动条的样式 } #div1::-webkit-scrollbar-button{   background:orange;  //微调按钮的样式,如下图中的橙色部分,位于轨道的两端   border-radius:15px; } #div1::-webkit-scrollbar-corner{   background:green; //边角,即两个滚动条的交汇处,如下图中绿色部分 } #div2{   width:300px;   height:500px;   background:pink; }

html如下:

<div id='div1'>
  <div id='div2'>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    7<br/>
  </div>
</div>

效果如下:

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML_&lt;select&gt;

下一篇:sass 基础——回顾