Custom Scrollbar – 个性化你的滚动条

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

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

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

<script>
    (function(){(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

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

$(".content").mCustomScrollbar({
    horizontalScroll:true
});

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

$(".content").mCustomScrollbar({
    theme:"light"
});

主题列表:

light
dark
light-2
dark-2
light-thick
dark-thick
light-thin
dark-thin

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

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

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

1:本博用的

/*scroll bar 1*/
::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: #CCC;
min-height: 25px;
border-radius: 10px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #F1F1F1;
}
::-webkit-scrollbar-thumb:hover {
background-color: #A3A3A3;
}

2:

::-webkit-scrollbar-track-piece {
	background-color:#15212F;
	-webkit-border-radius:0
}
::-webkit-scrollbar {
	width:15px;
	height:8px
}
::-webkit-scrollbar-thumb {
	height:50px;
	background-color:#999;
	-webkit-border-radius:8px;
	outline:2px solid #15212F;
	outline-offset:-2px;
	border:2px solid #15212F
}
::-webkit-scrollbar-thumb:hover {
	height:50px;
	background-color:#ffffff;
	-webkit-border-radius:8px
}

3:扁平灰

/*scroll bar 3*/
::-webkit-scrollbar {
	width:13px;
	height:13px;
}
::-webkit-scrollbar-thumb {
	background-color:#C2C2C2;
	background-clip:padding-box;
	border:1px solid #979797;
	min-height:28px;
}
::-webkit-scrollbar-track-piece {
	background-color:whiteSmoke;
	border-left:1px solid #D2D2D2;
}

4:绿色调

::-webkit-scrollbar{ width:10px; margin-right:2px }
::-webkit-scrollbar-track-piece{background-color:#F5F5F5;border-left:1px solid #D2D2D2;}
::-webkit-scrollbar-thumb{ background:#CBCBCB; width:10px }
::-webkit-scrollbar-thumb:hover{ background:#83B724 }

5:橙色调

::-webkit-scrollbar-thumb {
	background-color:#ff6f3d;
	height:50px;
	-webkit-border-radius:2px;
}
::-webkit-scrollbar-thumb:hover {
	background-color:#ff6f3d;
	height:50px;
	-webkit-border-radius:4px;
}
::-webkit-scrollbar {
	width:8px;
	height:8px;
}
::-webkit-scrollbar-track-piece {
	background-color:#fff;
	-webkit-border-radius:2px;
}

 

这篇文章有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