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

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

如下图:

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

%title插图%num

修改后

%title插图%num

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

%title插图%num

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

::-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;
}

相关链接

 

给TA买糖
共{{data.count}}人
人已赞赏
前端文档笔记运维

html超链接在Js内的一些写法转变与应用

2020-2-11 19:44:49

其他分享文档笔记运维

阿里云oss、又拍云储存等储存桶图片处理介绍 --配合 Time时光相册使用

2020-2-12 20:50:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧