关于html页面改动默认滚动条样式，遇到了记录一下

小白的随笔记

具体含义及其他设置项：

-webkit-scrollbar 滚动条整体部分
-webkit-scrollbar-button 滚动条两端的按钮
-webkit-scrollbar-track 外层轨道
-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
-webkit-scrollbar-thumb （拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）
-webkit-scrollbar-corner 边角
-webkit-resizer 定义右下角拖动块的样式

写了一个css，其中定义了一些样式，如下代码然后放在div的容器内可是页面的滚动条样式并没有改变，后来参考了一些资料知道我设置的是当前的div容器的样式，只有其中内容溢出且有overflow设置的不是hidden，这个div块级的容器滚动条样式才会改变。可是我想要的是改变页面的滚动条样式

.test {
width: 100%;
height: 1200px;
overflow-y: auto;
float: left;
margin: 5px;
border: none;
}

.scrollbar {
width: 100%;
height: 300px;
margin: auto;
overflow-y: scroll;
}

.style-1::-webkit-scrollbar { /*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 3px;
}

.style-1::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #535353;
}

.style-1::-webkit-scrollbar-track { /*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: #EDEDED;
}

那么想让整个页面的滚动条样式改变怎么设置呢 ？

首先在css的body{}中加上

scrollbar-face-color: #2b59b2;
scrollbar-base-color: #0f1639;
scrollbar-shadow-color: #0f1639;
scrollbar-highlight-color: #224473;
scrollbar-track-color: #224473;
scrollbar-arrow-color: #fff

接着css的文件添加以下的配置
接着修改默认的样式

::-webkit-scrollbar-track-piece {
-webkit-border-radius: 0
}
::-webkit-scrollbar {
width: 10px;
height: 5px
}
::-webkit-scrollbar-thumb {
outline-offset: 2px;
border: 2px solid #224473;
border-radius: 5px
}

• 点赞
• 收藏
• 分享
• 文章举报