网站美化:修改网站滚动条样式

我要冲啦个人网站建设2020-09-07web前端

  一、前言

  网站近两个月未更新了,一直在备战秋招。秋招太熬人,等秋招结束,再慢慢恢复文章更新速度。网站滚动条可以根据自己喜好修改样式。在所有浏览器中,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。例如:Google Chrome、Opera、360极速浏览器,猎豹浏览器等,搜狗浏览器等。

  二、代码部署

  这个代码只针对知更鸟主题用户,其他用户需要自行修改相应的style.css文件。效果展示:

网站美化:修改网站滚动条样式

  知更鸟主题的用户可以添加代码到外观->主题设置->定制风格->自定义样式里面。CSS

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

  ::-webkit-scrollbar {

  width: 9px;

  height: 9px

  }

  /*定义滚动条轨道*/

  ::-webkit-scrollbar-track {

  background-color: transparent;

  -webkit-border-radius: 2em;

  -moz-border-radius: 2em;

  border-radius: 2em

  }

  /*定义滑块 内阴影+圆角*/

  ::-webkit-scrollbar-thumb {

  background-color: #0093ff;

  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);

  -webkit-border-radius: 2em;

  -moz-border-radius: 2em;

  border-radius: 2em

  }

  三、总结

  样式可以根据自己的喜好进行修改,因为是基于webkit内核的,所以只有webkit内核的浏览器才支持该样式显示,IE浏览器不兼容,不过这年头应该也没人用IE了吧。

  如有更完善的代码,后续会分享给大家的。

文章关键词
网站美化
修改网站滚动条样式