子比主题美化 – 网站侧边滚动条

介绍

浏览器默认的滚动条样式太丑了,而且不同的浏览器下滚动条的样式也不一样,为了美观和统一,必须修改滚动条的样式。

有人问,为什么不自己写一个滚动条?

其一,自己写的滚动条效率和兼容性比不上浏览器默认滚动条。

其二,自己写太麻烦了吧,能用默认的为什么不用呢 0.o

图片[1] - 子比主题美化 – 网站侧边滚动条 - 筱信日记

教程

将以下代码放到自定义CSS里面即可!

/**彩色滚动条样式开始*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  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: #f6f6f6;
}
/**彩色滚动条样式结束*/
温馨提示:本文最后更新于2024-04-28 11:21:19,某些文章具有时效性,若有错误或失效,请在下方留言或联系筱信
仅供学习和研究使用,请在下载后24小时内删除
子比主题美化 – 网站侧边滚动条 - 筱信日记
子比主题美化 – 网站侧边滚动条
此内容为免费阅读,请登录后查看
  0
技术支持
自动发货
售后服务
网络收集
免费阅读
© 版权声明
WWW.HXINO.COM
点赞1赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容