css怎么设置滚动条宽度?

现在很多项目中都用到了滚动条,而且在有的时候,用到的是模拟滚动条,很多大型邮箱都是利用css样式来设置的,那么CSS如何设置滚动条宽度呢?

css中可以使用::-webkit-scrollbar伪类选择器设置滚动条样式,在此伪类选择器中可以通过width属性设置滚动条宽度。

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

  • ::-webkit-scrollbar — 整个滚动条.

  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).

  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.

  • ::-webkit-scrollbar-track — 滚动条轨道.

  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.

  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.

  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

/*滚动条样式*/
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
        width:4px;/*高宽分别对应横竖滚动条的尺寸*/
        height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);
}
.cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
}

推荐学习:CSS视频教程(公益免费)

以上就是css怎么设置滚动条宽度?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读