css滚动条(css滚动条样式修改)

css滚动条

scrollbar.css
@charset”utf-8″;
::-webkit-scrollbar
{
width:5px;
}
/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track{
border-radius:10px;
background-color:rgba(0,0,0,0.1);
}
/*定义滑块内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius:10px;
-webkit-box-shadow:inset006pxrgba(0,0,0,.3);
background-color:rgba(0,0,0,0.1);
}
在index.html中引入样式

css滚动条样式修改

咱们在自定义滚动条款式前，首先要了解滚动条的结构。浅显来讲，滚动条由两部分组成：一部分是能够滑动的部分，咱们称它为滑块；另一部分是滚动条的轨迹，也便是滑块的轨迹，一般来说，为了美观，滑块的色彩要比轨迹的色彩深一些。
首先介绍滚动条相关的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
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
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);