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

2018年9月20日18:46:39 6 5,772 °C
摘要

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

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

一、前言

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

二、代码部署

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

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

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

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了吧。

更新完一篇，我还是继续苦逼的做笔试题去吧。

weinxin
微信公众号
分享技术，乐享生活：微信公众号搜索「JackCui-AI」关注一个在互联网摸爬滚打的潜行者。
Jack Cui

发表评论

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

目前评论：6   其中：访客  3   博主  3

    • avatar butter 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 联通 1
      回复 2018年9月25日 下午3:49  沙发

      博主用的什么服务器建的网站

        • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Android 8.0.0 MIX 2 Build/OPR1.170623.027 辽宁省沈阳市 联通GSM/WCDMA/LTE共用出口
          回复 2018年9月25日 下午4:25  1层

          @butter 阿里云的ecs.

        • avatar 文中君 来自天朝的朋友 Safari浏览器 iPhone iPhone OS 12_3_1 like Mac OS X) AppleWebKit 黑龙江省哈尔滨市 联通 0
          回复 2019年6月26日 下午10:04  板凳

          之前没设置滚动条，现在直接放css里面就可以了嘛？

            • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 联通
              回复 2019年6月26日 下午10:32  1层

              @文中君 可以啊，直接放到文件里就行，改之前记得备份。

            • avatar R Brian 来自天朝的朋友 谷歌浏览器 Windows 10 广东省深圳市 电信 1
              回复 2019年11月28日 上午10:15  地板

              不是知更鸟的要怎么修改呢

                • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_4 北京市 百度网讯科技联通节点
                  回复 2019年11月28日 上午11:03  1层

                  @R Brian 样式修改跟什么主题关系不大，都是一样的修改css文件，你的主体应该也有一个存样式的文件，添加到里面即可。