html滚动条设置宽度,一看就会!

2022/6/15 4:20:06

本文主要是介绍html滚动条设置宽度,一看就会!,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

    各位程序员同学们,现在许多项目中需要使用滚动条,在某些情况下,使用模拟滚动条。许多大型邮箱都是使用CSS样式设置的div滚动条宽度,那么CSS如何设置滚动条的宽度呢,下面就给大家说一说:

    可以在CSS中使用::-webkit-scrollbar伪类选择器来设置滚动条样式. 在此伪类选择器中,可以通过width属性设置滚动条的宽度。可以使用以下伪元素选择器来修改各种Webkit浏览器的滚动条样式:

/*滚动条样式*/

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

}

    以上便是关于html滚动条设置宽度的全部内容,有关更多详细信息div滚动条宽度,请关注慕课网其他文章~



这篇关于html滚动条设置宽度,一看就会!的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程