专栏首页钻芒博客css修改浏览器内的页面滚动条样式

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • N款自适应的404页面源码

    AlexTao
  • WordPress主题 仿Win10资源管理器主题 win10explore

    本主题是为WordPress博客程序开发的一套主题,仿Windows资源管理器界面,非常有个性。主题由果核剥壳开发,是第一套完整开发的并开源的主题,目前已经开源...

    AlexTao
  • WordPress添加注册验证防止机器人注册

    记得今年过年的时候有一波机器人天天来博客注册用户,这几天又有一批NPC来“拜访”博客。

    AlexTao
  • CSS3自定义滚动条样式 -webkit-scrollbar

    webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是...

    山河木马
  • Spring Boot整合Quartz定时任务框架

    用户4919348
  • 【Rust日报】2020-06-06 capnproto-rust 支持 [no_std]

    rmuxinator,该项目是 tmuxinator 的一个克隆,它允许用户定义 tmux 项目配置文件。例如,打开两个窗口,将每个窗口分成三个窗格,并在每个窗...

    MikeLoveRust
  • HttpComponents HttpClient连接池(9)-长连接

    在上一篇文章里我们介绍了 httpclient 连接池对于 SSL 的支持,这里主要介绍连接池中的长连接。

    TA码字
  • 挑战程序竞赛系列(48):4.2 推理与动态规划算法(1)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户1147447
  • [Python开发工具]·pyinstaller(windows)报错解决(持续更新中)

    小宋是呢
  • MyBatis-plus中的Page出现返回total总为0的问题

    在使用MyBatis-plus进行分页的过程中,发现返回的Page中的属性total总为0的问题,但是是有数据的!可以尝试如下解决方案:

    似水的流年

扫码关注云+社区

领取腾讯云代金券