WordPress 滚动条样式


背景

看别人家的滚动条挺好看自己就想加一个而已。
已下代码仅在WordPress中Chrome浏览器下测试有效。

操作

请在WordPress主题目录下style.css文件底部添加如下代码,效果请右移看本站效果。

/*---滚动条默认显示样式--*/  
::-webkit-scrollbar-thumb{  
   background-color:#4C4C4C;  
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}  

/*---鼠标点击滚动条显示样式--*/  
::-webkit-scrollbar-thumb:hover{  
   background-color:#018EE8;  
   height:50px;  
   -webkit-border-radius:4px;  
}  

/*---滚动条大小--*/  

::-webkit-scrollbar{  
   width:8px;  
   height:8px;  

}  

/*---滚动框背景样式--*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

另附:active也可以设置鼠标点击的颜色,只要到上面的代码添加如下代码就行了。

::-webkit-scrollbar-thumb:active{  
   height:50px;  
   background-color:#000;  
   -webkit-border-radius:4px;  
}

特别补充

本站因为更换wp theme(Kratos-pjax  Github)导致CSS覆盖问题,所以这里补充我就直接将CSS文件放到了主题目录footer.php文件中直接在底部添加如下代码:

刚开始是写index.php里的,后来一想感觉footer.php更合适
<style type="text/css">
/*滚动条*/
::-webkit-scrollbar-thumb{background-color:#4c4c4c;height:50px;outline-offset:-2px;outline:2px solid #fff;-webkit-border-radius:4px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background-color:#018ee8;height:50px;-webkit-border-radius:4px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track-piece{background-color:#fff;-webkit-border-radius:0}
</style>

CSS需要压缩?点此进入传送阵

崔哲博客本文短连接地址 : https://xn--xwr12q.xn--fiqs8s/RKsfN
点赞
  1. 黄良钵说道:
    Google Chrome 63.0.3239.132 GNU/Linux x64

    我也来自定义滚动条看看 :biggrin:

    1. 崔哲说道:
      Google Chrome 63.0.3239.132 Windows 7

      不仔细看,滚动条一般不在意的。

  2. 亲像古早味说道:
    Google Chrome 67.0.3396.87 Windows 7 x64 Edition

    :evil: 有意思 富强 民主(来自上班偷偷点开网站的网友)

发表评论

电子邮件地址不会被公开。必填项已用 * 标注