CSS修改浏览器滚动条样式的方法

这篇文章主要介绍“CSS修改浏览器滚动条样式的方法”，在日常操作中，相信很多人在CSS修改浏览器滚动条样式的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS修改浏览器滚动条样式的方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都成都湿喷机小微创业公司专业提供成都企业网站定制营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

我们在自定义滚动条样式前，首先要了解滚动条的结构。通俗来讲，滚动条由两部分组成：一部分是可以滑动的部分，我们称它为滑块；另一部分是滚动条的轨道，也就是滑块的轨道，一般来说，为了美观，滑块的颜色要比轨道的颜色深一些。

首先介绍滚动条相关的CSS代码，以及他们的含义

::-webkit-scrollbar：指滚动条整体部分，它的属性有width,height,background等

::-webkit-scrollbar-button：指滚动条两边的按钮。当不需要时可以用display:none将其隐藏

::-webkit-scrollbar-track：指外层轨道部分，当不需要时可以用display:none将其隐藏，也可以添加你想要的颜色

::-webkit-scrollbar-track-piece：指内层轨道部分，即滚动条中间的部分

::-webkit-scrollbar-thumb：指滚动条里面可以拖动的部分，也就是滑块

::-webkit-scrollbar-corner：指边角部分

::-webkit-resizer：他用来定义右下角滑块的样式

但是最常用的是滚动条整体部分（-webkit-scrollbar），滑块（-webkit-scrollbar-thumb）以及外轨道（-webkit-scrollbar-track）三部分。

接下来我们将div盒子里面超出的部分隐藏，给div设置滚动条样式，看看怎么用CSS实现滚动条样式。

HTML部分：

haveaniceday

CSS部分：

.scroll{

margin:100pxauto;

border:1pxsolid#000;

width:200px;

height:300px;

overflow:auto;

}

.scroll::-webkit-scrollbar{

width:10px;

height:10px;

}

/*正常情况下滑块的样式*/

.scroll::-webkit-scrollbar-thumb{

background-color:rgba(0,0,0,.05);

border-radius:10px;

-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);

}

/*鼠标悬浮在该类指向的控件上时滑块的样式*/

.scroll:hover::-webkit-scrollbar-thumb{

background-color:rgba(0,0,0,.2);

border-radius:10px;

-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);

}

/*鼠标悬浮在滑块上时滑块的样式*/

.scroll::-webkit-scrollbar-thumb:hover{

background-color:rgba(0,0,0,.4);

-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);

}

/*正常时候的主干部分*/

.scroll::-webkit-scrollbar-track{

border-radius:10px;

-webkit-box-shadow:inset006pxrgba(0,0,0,0);

background-color:white;

}

/*鼠标悬浮在滚动条上的主干部分*/

.scroll::-webkit-scrollbar-track:hover{

-webkit-box-shadow:inset006pxrgba(0,0,0,.4);

background-color:rgba(0,0,0,.01);

}
CSS修改浏览器滚动条样式的方法

到此，关于“CSS修改浏览器滚动条样式的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

网页名称：CSS修改浏览器滚动条样式的方法
本文路径：http://azwzsj.com/article/gipjce.html

CSS修改浏览器滚动条样式的方法

其他资讯