css修改浏览器内的页面滚动条样式

有时候网站逼格够了之后却发现默认的滚动条很影响和整体美观

如下图:

暗黑模式下全屏展示右侧的滚动条显得很突兀。

修改后

由于要考虑到白天模式，所有个滚动条也要合适白天使用，所以这里钻芒博主采用了纯白为底色，茶花红#ee3f4d为滑块颜色，黑白通吃

修改方法，把下面的css丢到你的style.css即可  第二块注释的为彩色滚动条。可自行修改

代码语言：javascript复制

::-webkit-scrollbar {/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
/*height: 5px;*/
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
background-color: #ee3f4d;
/*background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);*/
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #fff;
}

css

0 人点赞