css修改浏览器内的页面滚动条样式
有时候网站逼格够了之后却发现默认的滚动条很影响和整体美观
如下图:
暗黑模式下全屏展示右侧的滚动条显得很突兀。
修改后
由于要考虑到白天模式，所有个滚动条也要合适白天使用，所以这里钻芒博主采用了纯白为底色，茶花红#ee3f4d为滑块颜色，黑白通吃
修改方法，把下面的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;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录