一、前言
网站近两个月未更新了，一直在备战秋招。秋招太熬人，等秋招结束，再慢慢恢复文章更新速度。网站滚动条可以根据自己喜好修改样式。在所有浏览器中，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市面上基于webkit内核的浏览器也是很难穷举完。例如：Google Chrome、Opera、360极速浏览器，猎豹浏览器等，搜狗浏览器等。
二、代码部署
这个代码只针对知更鸟主题用户，其他用户需要自行修改相应的style.css文件。效果展示：
知更鸟主题的用户可以添加代码到外观->主题设置->定制风格->自定义样式里面。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-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了吧。
更新完一篇，我还是继续苦逼的做笔试题去吧。
评论列表 (0)