如何在CSS中设置滚动条的宽度?

电脑杂谈  发布时间:2020-05-16 19:02:15  来源:网络整理

div滚动条宽度_div滚动条样式 宽度_div滚动条 宽度

现在许多项目中使用滚动条,在某些情况下,使用模拟滚动条. 许多大型邮箱都是使用CSS样式设置的div滚动条宽度,那么CSS如何设置滚动条的宽度?

div滚动条宽度_div滚动条 宽度_div滚动条样式 宽度

div滚动条样式 宽度_div滚动条 宽度_div滚动条宽度

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

div滚动条宽度_div滚动条样式 宽度_div滚动条 宽度

您可以使用以下伪元素选择器来修改各种Webkit浏览器的滚动条样式:

div滚动条 宽度_div滚动条样式 宽度_div滚动条宽度

/*滚动条样式*/
.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的滚动条宽度的?有关更多详细信息div滚动条宽度,请注意html中文网站上的其他相关文章!


本文来自电脑杂谈,转载请注明本文网址:
http://www.pc-fly.com/a/jisuanjixue/article-212197-1.html

    相关阅读
    发表评论  请自觉遵守互联网相关的政策法规,严禁发布、暴力、反动的言论

    热点图片
    拼命载入中...