Begin主题美化修改滚动条样式

2021年8月25日16:05:26 发表评论

文章转载至:Jack Cui-网站美化:修改网站滚动条样式

一、前言

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

二、代码部署

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

Begin主题美化修改滚动条样式

  1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  2. ::-webkit-scrollbar {
  3.     width: 9px;
  4.     height: 9px
  5. }
  6. /*定义滚动条轨道*/
  7. ::-webkit-scrollbar-track {
  8.     background-color: transparent;
  9.     -webkit-border-radius: 2em;
  10.     -moz-border-radius: 2em;
  11.     border-radius: 2em
  12. }
  13. /*定义滑块 内阴影+圆角*/
  14. ::-webkit-scrollbar-thumb {
  15.     background-color: #0093ff;
  16.     background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.425%,transparent 25%,transparent 50%,rgba(255,255,255,.450%,rgba(255,255,255,.475%,transparent 75%,transparent);
  17.     -webkit-border-radius: 2em;
  18.     -moz-border-radius: 2em;
  19.     border-radius: 2em
  20. }

三、总结

样式随自己喜好改就行,由于是基于webkit内核的,因此只有webkit内核的浏览器才支持该样式显示,IE浏览器不兼容,不过这年头应该也没人用IE了吧。

兰溪苑

发表评论

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