Custom Scrollbar – 个性化你的滚动条

经常逛IT类博客的人都知道爱折腾的博主都喜欢搞个性化,喜欢与众不同,其中一个小细节就是网站滚动条。一个个性化的滚动条不但可以跟自己的网站配色搭调,而且可以提高用户体验。看到过Mac或者经常使用Ubuntu的朋友可能会感觉到这两个系统的滚动条比windows可是漂亮多了,这就是我今天要介绍的这个jQuery插件——Custom Scrollbar的原因.
首先在头部head标签中加载CSS:

然后在底部body标签前加载js和jQuery(当然已经载入过的就不用加载jquery啦):

最后在希望出现滚动条的位置加上以下代码:
注意:”.content”这个class预先要有样式,比如max-height、overflow:auto等

默认是出现纵向滚动条的,如果你希望横向滚动条也显示,那么多加上以下代码即可:

插件还有很多主题,下面是个light主题的代码,如果需要其他主题,可以把下面代码中的light换成下面列出的其他主题名就行啦

主题列表:

主题效果请点这边→https://sell.moe/yr8n

这个插件其他的高级应用就不一一介绍了,想研究的请移步这边→https://sell.moe/jt3u

不过这个插件只能用在正文上,不能改变浏览器的滚动条,于是下面提供了几个自己用过的滚动条CSS3样式:

1:本博用的

2:

3:扁平灰

4:绿色调

5:橙色调

 

这篇文章有5条评论

  1. Moon 2013/12/4 #1 回复TA

    哪来这么多炫酷的东西 – –

    • Kagami po主 回复 Moon 2013/12/4 回复TA

      这个效果确实好顶赞,不过要多加载个js对于有洁癖的人来说就是痛苦了

  2. inlaid harp 2014/4/26 #2 回复TA

    = = 看不懂QAQ

  3. 同盟源 2015/1/13 #3 回复TA

    我是用伪元素自定义滚动条的,不过只有在chrome内核浏览器下才有效果

发表评论

*

List
Love
00:00