HTML 修改滚动条样式

客官°小女子只卖身不卖艺 2023-06-30 06:52 9阅读 0赞

# 修改滚动条样式 #

给一个 div 设置

.orgs-container {
            max-height: 378px;
            height: 378px;
            overflow-y: auto;
        }

Mac 上面 的滚动条样式为  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vbW9tb21vbW0_size_16_color_FFFFFF_t_70]  
修改样式

.orgs-container::-webkit-scrollbar {    /*滚动条整体样式*/
            width: 10px;                        /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        .orgs-container::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #ebebeb;
        }
        .orgs-container::-webkit-scrollbar-track {  /*滚动条里面轨道*/
            /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
            border-radius: 10px;
            background: #fff;
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vbW9tb21vbW0_size_16_color_FFFFFF_t_70 1]  
相关 HTML 代码如下，仅为记录类的层级关系

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vbW9tb21vbW0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200115160229974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vbW9tb21vbW0=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vbW9tb21vbW0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200115160536776.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vbW9tb21vbW0=,size_16,color_FFFFFF,t_70