css如何修改滚动条样式

滚动条样式修改

默认滚动条样式如下：

那如何修改呢？如下代码：

<p class="inner">

        <p class="innerbox">

        <p style="height:200px;">这是内容111</p>

        <p style="height:400px;">这里是内容222</p>

        <p>这里是内容333</p>

    </p>

</p>

.inner{

    width: 265px;

    height: 400px;

    position: absolute;

    top: 33px;

    left: 13px;

    overflow:hidden;

}

.innerbox{

    overflow-x: hidden;

    overflow-y: auto;

    color: #000;

    font-size: .7rem;

    font-family: "\5FAE\8F6F\96C5\9ED1",helvetica,"黑体",Arial,Tahoma;

    height: 100%;

}

/*滚动条样式*/

.innerbox::-webkit-scrollbar {

    width: 4px;    

    /*height: 4px;*/

}

.innerbox::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -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);

}

效果显示如图：

下面就讲解滚动条几个属性，主要有下面7个属性

1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
2. ::-webkit-scrollbar-button 滚动条两端的按钮
3. ::-webkit-scrollbar-track  外层轨道
4. ::-webkit-scrollbar-track-piece  内层滚动槽
5. ::-webkit-scrollbar-thumb 滚动的滑块
6. ::-webkit-scrollbar-corner 边角
7. ::-webkit-resizer 定义右下角拖动块的样式

更多技术问题，可前往http://sucai.gxyourui.cn/Home/Article/blog

相关阅读

div 可滚动但不显示滚动条

（原）首先有3个p，第1个，固定大小是200*200（单位为px，下同）第2个，不固定大小，其大小要用第3个p把个撑开，但是这个p必需要有滚动条，第3个，固定大

9.【Excel】百分比样式、表格样式、插入符号、查找技

文章最后发布于: 20

div 如何加滚动条

p 加滚动条的两种方法： 一、 <p style=" overflow:scroll; width:400px; height:400px;”></p> 记住宽和高一定要设置噢，否则不成的

CSS3属性选择器及伪类选择器

CSS3相比CSS2在选择器中增加了通配符的概念，赋予其强大功能。 E[attr^="val"] 定义了属性attr，并且以val开头的任意字符串 E[att

关于QtGraphics编程的几点经验总结_qgraphicsscene

转载自：http://www.niubb.com/riji/2015/10-01/12524.htmlQtGraphics模块用于显示二维的图形图像，所以三维的事情就不要找它了，应该