当前位置：首页 > news >正文

css控制默认滚动条样式

news 来源：原创 2024/5/2 13:58:06

针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：

滚动条组成部分

1. ::-webkit-scrollbar                滚动条整体部分
2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） 3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） 4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。 5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分 6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方 7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

滚动条样式/颜色组成部分

scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/
scrollbar-face-color: #333; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/

如下为代码：

 /*定义滚动条轨道*/
    #style-2::-webkit-scrollbar-track
    {
        background-color: #F5F5F5;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
    }
    /*定义滚动条高宽及背景*/
    #style-2::-webkit-scrollbar
    {
        width: 10px;
        background-color: rgba(0, 0, 0, 0.34);
    }
    /*定义滚动条*/
    #style-2::-webkit-scrollbar-thumb
    {
        background-color: #8b8b8b;
        border-radius: 10px;
    }

*要实现单个div里面的内容滚动，需要满足三个条件：

1、div必须设定固定的高度，不能使用百分比或 auto 等弹性值。

2、其中的内容高度必须超过它本身的高度。

3、必须添加属性 “overflow：auto”。

附：

::-webkit-scrollbar{
    width: 10px;
    height: 8px;
    background-color: #515a6e;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
}
::-webkit-scrollbar:hover{
    background-color: #d1d1d1;
}
::-webkit-scrollbar-thumb{
    background-color: rgb(23, 35, 61, 0.6);
    height: 50px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active{
    background-color:rgb(23, 35, 61, 0.8);
    border-right: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
}
::-webkit-scrollbar-track{
    background-color:#fff;
}
::-webkit-scrollbar-track:hover{
    background-color:#fff;
}