wordpress网站添加自定义滚动条样式

2018年1月25日20:05:24 发表评论 50

今天在做导航站的时候，看到了设置自定义滚动条的样式，想着给自己的wordpress博客也加上个自定义滚动条样式，就了解了下CSS3的-webkit-scrollbar，我之前也看过CSS3的教程，没有发现这个属性，所以特意的收集了有关这个属性的资料，在此全部分享给大家，也加深下自己的印象，大家可以利用这个属性给任何一个网站自定义非常漂亮的滚动条样式。

wordpress网站添加自定义滚动条样式

一、自定义滚动条样式预览

二、滚动条的组成属性

  1. ::-webkit-scrollbar  滚动条整体部分
  2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，向上向下移动（这个取决于是垂直滚动条还是水平滚动条）
  3. ::-webkit-scrollbar-track 滚动条的轨道，也包括上一个属性
  4. ::-webkit-scrollbar-button 滚动条的轨道两端的按钮，允许通过点击微调小方块的位置
  5. ::-webkit-scrollbar-track-piece  内层轨道，滚动条中间部分
  6. ::-webkit-scrollbar-corner  边角，即两个滚动条交汇处
  7. ::-webkit-resizer  两个滚动条的交汇处上用于通过手动调整元素大小的小控件

三、wordpress博客加个渐变的滚动条

将下面的代码加入到wordpress主题style.css样式中，就可以有渐变的滚动条了，如上面图片这样子的滚动条，更多滚动条设置请看上面的代码演示，根据滚动条的组成属性，自己为自己的网站添加颜色搭配的滚动条。

  1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  2. ::-webkit-scrollbar
  3. {
  4.     width: 10px;
  5.     height: 20px;
  6.     background-color: #F5F5F5;
  7. }
  9. /* 定义滚动条轨道 */
  10. ::-webkit-scrollbar-track
  11. {
  12.     border-radius: 10px;
  13.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  14.      box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  15. }
  17. /* 定义滑块 */
  18. ::-webkit-scrollbar-thumb
  19. {
  20.    border-radius: 10px;
  21.     background: linear-gradient(to bottombottom, #3690cf, #17decf);
  23. }

四、自定义滚动条更加全面的设置

我们上面用到的都是伪元素，我们平时用到的最多的:hover，:link这些是伪类，::first-line，::before，::after这些就是伪元素，和上面的滚动条伪元素一样，任何对象都可以设置边框、背景、阴影等，下面的这些伪类可以用到上面的伪元素中，贴出代码如下：

  1. :horizontal
  2. //horizontal伪类适用于任何水平方向上的滚动条
  4. :vertical
  5. //vertical伪类适用于任何垂直方向的滚动条
  7. :decrement
  8. //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
  10. :increment
  11. //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
  13. :start
  14. //start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面
  16. :end
  17. //end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面
  19. :double-button
  20. //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
  22. :single-button
  23. //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
  25. :no-button
  26. no-button伪类表示轨道结束的位置没有按钮。
  28. :corner-present
  29. //corner-present伪类表示滚动条的角落是否存在。
  31. :window-inactive
  32. //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。
  34. ::-webkit-scrollbar-track-piece:start {
  35. /*滚动条上半边或左半边*/
  36. }
  38. ::-webkit-scrollbar-thumb:window-inactive {
  39. /*当焦点不在当前区域滑块的状态*/
  40. }
  42. ::-webkit-scrollbar-button:horizontal:decrement:hover {
  43. /*当鼠标在水平滚动条下面的按钮上的状态*/
  44. }

 

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: