Fork me on GitHub

scroll滚动条样式修改

一般我们有两种情况会出现滚动条,一种是overflow,一种是使用scroll.

当我们需要改变这个滚动条样式的时候,我们需要做以下的修改:

html:

<div id="style-2">里是富文本这里是富文本这里是富文本这里是富文本这里是富文本这里是富文本</div>

css:

#style-2{height:20px;width:50px;overflow:auto;}
#style-2::-webkit-scrollbar-track{background-color: #242d3e;-webkit-box-shadow: inset 0 0 6px #242d3e;}
   /*定义滚动条高宽及背景*/
    #style-2::-webkit-scrollbar{width: 5px;background-color: #242d3e;}
   /*定义滚动条*/
  #style-2::-webkit-scrollbar-thumb {background-color: #09a5ee;border-radius: 5px;}

 

posted @ 2017-08-03 15:14  广东靓仔-啊锋  阅读(916)  评论(0编辑  收藏  举报