【WordPress】网站添加侧边彩色的滚动条

Wordpress
7月28日
编辑

WDomon

WordPress默认浏览器侧边栏滚动条有点丑，当然，个别WordPress主题是自带美化的侧边滚动栏无需我们自己美化，有些WordPress主题是没有美化侧边滚动栏，没有怎么办呢，我们自己美化！优优网站长就教大家自定义美化侧边滚动栏。非常简单，一句代码的事情就可以完成自定义美化WordPress侧边滚动栏，代码适用于绝大多数WordPress主题。

使用方法

一般主题都会自带自定义代码这样主题设置的，只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦！

如果主题没有自定义代码那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码就即可美！

单颜色的滚动条css代码如下：

/*滚动条显示样式*/  
::-webkit-scrollbar-thumb{
   background-color:#FF6666;  /*更改喜欢的十六进制颜色*/
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}  
/*滚动条大小*/ 
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}  
/*滚动框背景样式*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

彩色的滚动条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;
}

声明：本站部分文章来源于网络，如有危害到您的合法权益请联系客服

温馨提示：本站提供的一切软件、教程和内容信息都来自网络收集整理，仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，版权争议与本站无关。用户必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件【 lrzy8@qq.com 】与我们联系处理。敬请谅解！

{{userData.name}}已认证

使用方法

WordPress网站B2主题用户等级、圈子用户等级美化

WordPress-7B2主题美化之菜单栏彩色角标