大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么在css中设置滚动条的宽度

怎么在css中设置滚动条的宽度?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

创新互联建站是一家集网站制作、做网站、网站页面设计、网站优化SEO优化为一体的专业的建站公司,已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步,服务才是根本,我们始终坚持讲诚信,负责任的原则,为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

在css中,可以使用“::-webkit-scrollbar”伪类选择器和width属性来设置设置,语法格式如下:

::-webkit-scrollbar{
width:宽度值;
}

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

  • ::-webkit-scrollbar 滚动条整体部分

  • ::-webkit-scrollbar-thumb  滚动条里面的小方块(即滚动条滑块),能向上向下移动(或横向滚动条可往左往右移动)

  • ::-webkit-scrollbar-track  滚动条的轨道(对应上图滚动条凹槽,里面装有Thumb,即滚动条滑块)

  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置

  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处

  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分

  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

/*滚动条样式*/
.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);
}

实例:

1.、style部分

2、body部分


        11111111
        

11111111111111111111

        

11111111111111111111

        

11111111111111111111

        

11111111111111111111

        

11111111111111111111

        

11111111111111111111

        

11111111111111111111

        

11111111111111111111

        

11111111111111111111

        

11111111111111111111

    

效果图:

怎么在css中设置滚动条的宽度

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


文章标题:怎么在css中设置滚动条的宽度
文章分享:http://dzwzjz.com/article/pgpdgs.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP