⾃定义滚动条mCustomScrollbar
mCustomScrollbar 是个基于 jQuery UI 的⾃定义滚动条插件，它可以让你灵活的通过 CSS 定义⽹页的滚动条，并且垂直和⽔平两个⽅向的滚动条都可以定义，它通过 Brandon
Aaron jquery mouse-wheel plugin 提供了⿏标滚动的⽀持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以⾃动调整滚动条的位置和定义滚动到的位置等。
(HTML必须存在于⽂档流, 不能为display:none)
1.如何使⽤ mCustomScrollbar(必须要加载如下的4个⽂件)
jquery.mCustomScrollbar.js
jquery.mCustomScrollbar.css
mCSB_buttons.png
jQuery：这个插件的必备库
jQuery UI：扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。
jquery.mCustomScrollbar.js：这是我们的插件主⽂件。在插件包的 minified 你可以到它的压缩版。
jquery.mCustomScrollbar.css：这个 CSS ⽂件是让我们来定义边栏⽤的。你可以在这个⽂件中定义你的边栏，当然你可以在其他的 CSS ⽂件中定义，要注意的是，你要⽤
CSS 中的顺序，其中的优先级关系来覆盖这个⽂件中的定义。
mCSB_buttons.png：这个 png 图⽚⽂件，包含了向上向下向左向右滚动的按钮。可以使⽤ CSS sprites 技术，来使⽤这个图⽚中的相应按钮。插件包中包含了这个图⽚的 PSD
源⽂件（sources/mCSB_buttons.psd ），你可以根据⾃⼰的需求⾃定义。
其实如果只是简单的滚动条，只要加载如下2个⽂件即可
jquery.mCustomScrollbar.js
jquery.mCustomScrollbar.css
第⼀步：加载 mCustomScrollbar 的样式⽂件。
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
第⼆步：加载必须的 JS ⽂件。
需要加载的⽂件有如下⼏个：jQuery、jQuery UI， usewheel.min.js 和 jquery.mCustomScrollbar.js 这四个。
jQuery 和 jQuery UI 是必须的， usewheel.min.js 是⽤来提供滚动⽀持的，jquery.mCustomScrollbar.js 则是插件的主⽂件。
<script src="js/jquery.mCustomScrollbar.js" type="text/javascript"><\/script>
<script src="usewheel.min.js" type="text/javascript"><\/script>
第三步：应⽤ mCustomScrollbar
$(function(){
$("#id").mCustomScrollbar();
})
mCustomScrollbar 的参数介绍
setWidth: false//设置你内容的宽度值可以是像素值或者百分⽐(string)，取值300,"30%"
setHeight: false//设置你内容的⾼度值可以是像素值或者百分⽐(string)，取值300,"30%"
setTop: 0 //设置⼀开始纵向滚动的位置，取值"100px"，值为字符串
setLeft: 0 //设置⼀开始横向滚动的位置，取值"100px"，值为字符串
axis: "string" //"x","y"，值为字符串，分别对应横纵向滚动
scrollInertia:Integer//滚动的惯性值在毫秒中使⽤0可以⽆滚动惯性 (滚动惯性可以使区块滚动更加平滑)
scrollbarPosition: "string" //取值"inside","outside"，值为字符串,⽗元素必须是relative定位，滚动条出在元素的内部(inside)或者外部(outside);
autoDraggerLength:Boolean：//根据内容区域⾃动调整滚动条拖块的长度值:true,false
alwaysShowScrollbar:Integer//保持滚动条的显⽰，取值0,1(保持滚动块可见),2(保持滚动条所有的显⽰)
mouseWheel:{
enable: boolean//启⽤或禁⽤通过⿏标滚轮滚动内容。
scrollAmount: Integer//滚轮滚动的像素
invert: boolean//反转滚动⽅向
}
scrollButtons:{ enable:Boolean } //是否添加滚动条两端按钮⽀持值:true,false
scrollButtons:{ scrollType:String } //滚动按钮滚动类型值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) 点击这⾥可以看到形象的例⼦
scrollButtons:{ scrollSpeed:Integer } //设置点击滚动按钮时候的滚动速度(默认 20) 设置⼀个更⾼的数值可以更快的滚动
scrollButtons:{ scrollAmount:Integer } //设置点击滚动按钮时候每次滚动的数值像素单位默认 40像素
advanced:{ updateOnBrowserResize:Boolean } //根据百分⽐为⾃适应布局调整浏览器上滚动条的⼤⼩值:true,false 设置 false 如果你的内容块已经被固定⼤⼩
advanced:{ updateOnContentResize:Boolean } //⾃动根据动态变换的内容调整滚动条的⼤⼩值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条⼤⼩建议除⾮必要不要设置成 true 如果页⾯中有很多滚动条的时候它有可能会advanced:{ autoExpandHorizontalScroll:Boolean } //⾃动扩⼤⽔平滚动条的长度值:true,false 设置 true 你可以根据内容的动态变化⾃动调整⼤⼩可以看D
emo
advanced:{ autoScrollOnFocus:Boolean } //是否⾃动滚动到聚焦中的对象例如表单使⽤类似TAB键那样跳转焦点值:true false
callbacks:{ onScrollStart:function(){} } //使⽤⾃定义的回调函数在滚动时间开始的时候执⾏具体请看Demo
callbacks:{ onScroll:function(){} } //⾃定义回调函数在滚动中执⾏ Demo 同上
callbacks:{ onTotalScroll:function(){} } //当滚动到底部的时候调⽤这个⾃定义回调函数 Demo 同上
callbacks:{ onTotalScrollBack:function(){} } //当滚动到顶部的时候调⽤这个⾃定义回调函数 Demo 同上
callbacks:{ onTotalScrollOffset:Integer } //设置到达顶部或者底部的偏移量像素单位
callbacks:{ whileScrolling:function(){} } //当⽤户正在滚动的时候执⾏这个⾃定义回调函数
callbacks:{ whileScrollingInterval:Integer } //设置调⽤ whileScrolling 回调函数的时间间隔毫秒单位
/
/默认值
(function($){
$(document).ready(function(){
$("#content").mCustomScrollbar({
setWidth: false,
setHeight: false,
setTop: 0,
setLeft: 0,
axis: "y",
scrollInertia:0,
scrollbarPosition: "inside",
autoDraggerLength:false
autoExpandScrollbar:true
alwaysShowScrollbar:2
mouseWheel:{
enable:true
scrollAmount:10
preventDefault:true
invert:true
},
scrollButtons:{
enable:false,
scrollType:"continuous",
scrollSpeed:20,
scrollAmount:40
},
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:false,
autoExpandHorizontalScroll:false,
autoScrollOnFocus:true
},
callbacks:{
onScrollStart:function(){},
onScroll:function(){},
onTotalScroll:function(){},
onTotalScrollBack:function(){},
onTotalScrollOffset:0,
whileScrolling:false,
whileScrollingInterval:30
}
});
});
})(jQuery);
update
⽤法：$(selector).mCustomScrollbar(“update”);
调⽤ mCustomScrollbar 函数的 update ⽅法去实时更新滚动条当内容发⽣变化（例如通过 Javascript 增加或者移除⼀个对象、通过 ajax 插⼊⼀段新内容、隐藏或者显⽰⼀个新内容等）
下⾯是例⼦：
$(".content .mCSB_container").append("<p>New </p>");
$(".content").mCustomScrollbar("update");
$(".content .myImagesContainer").append("<img src='myNewImage.jpg' />");
$(".content .myImagesContainer img").load(function(){
$(".content").mCustomScrollbar("update");
});
$("#content-1").animate({height:800},"slow",function(){
$(this).mCustomScrollbar("update");
});
html横向滚动条样式当新内容完全加载或者动画完成之后，update ⽅法⼀直被调⽤。
scrollTo
⽤法：$(selector).mCustomScrollbar(“scrollTo”,position);
你可以使⽤这个⽅法⾃动的滚动到你想要滚动到的位置。这个位置可以使⽤字符串（例如 “#element-id”，“bottom” 等）描述或者是⼀个数值（像素单位）。下⾯的例⼦将会滚动到最下⾯的对象
$(".content").mCustomScrollbar("scrollTo","last");
scrollTo ⽅法的参数
$(selector).mCustomScrollbar(“scrollTo”,String);：滚动到某个对象的位置，字符串型的值可以是 id 或者 class 的名字
$(selector).mCustomScrollbar(“scrollTo”,”top”);：滚动到顶部（垂直滚动条）
$(selector).mCustomScrollbar(“scrollTo”,”bottom”);：滚动到底部（垂直滚动条）
$(selector).mCustomScrollbar(“scrollTo”,”left”);：滚动到最左边（⽔平滚动条）
$(selector).mCustomScrollbar(“scrollTo”,”right”);：滚动到最右边（⽔平滚动条
$(selector).mCustomScrollbar(“scrollTo”,”first”);：滚动到内容区域中的第⼀个对象位置
$(selector).mCustomScrollbar(“scrollTo”,”last”);：滚动到内容区域中的最后⼀个对象位置
$(selector).mCustomScrollbar(“scrollTo”,Integer);：滚动到某个位置（像素单位）
scrollTo ⽅法还有两个额外的选项参数
moveDragger: Boolean：滚动滚动条的滑块到某个位置像素单位，值：true，flase。例如：$(selector).mCustomScrollbar(“scrollTo”,200,{ moveDragger:true });
callback：Boolean：执⾏回调函数当 scroll-to 完成之后，值：true，false 例如：$(selector).mCustomScrollbar(“scrollTo”,200,{ callback:true });
disable
⽤法：$(selector).mCustomScrollbar(“disable”);
调⽤ disable ⽅法去使滚动条不可⽤。如果想使其重新可⽤，调⽤ update⽅法。disable ⽅法使⽤⼀个可选参数（默认 false）你可以设置 true 如果你想重新让内容区域滚动当scrollbar 不可⽤时。例如：
$(".content").mCustomScrollbar("disable",true);
可以看⼀些使⽤ disable 的例⼦
destroy
⽤法：$(selector).mCustomScrollbar(“destroy”);
调⽤ destroy ⽅法可以移除某个对象的⾃定义滚动条并且恢复默认样式
可以看⼀些使⽤ destroy 的例⼦
滚动条的 HTML 结构
//垂直滚动条结构：
<div class="content mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox">
<div class="mCSB_container">
<!-- your long -->
</div>
<div class="mCSB_scrollTools">
<a class="mCSB_buttonUp"></a>
<div class="mCSB_draggerContainer">
<div class="mCSB_dragger ui-draggable">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
<a class="mCSB_buttonDown"></a>
</div>
</div>
</div>
//⽔平滚动条 mCSB_buttonUp 和 mCSB_buttonDown 这两个 a 标签只有当你启⽤了 scroll buttons 功能的时候，才可⽤。
<div class="mCustomScrollBox mCSB_horizontal">
<div class="mCSB_container">
<!-- your long -->
</div>
<div class="mCSB_scrollTools">
<a class="mCSB_buttonLeft"></a>
<div class="mCSB_draggerContainer">
<div class="mCSB_dragger ui-draggable">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
<a class="mCSB_buttonRight"></a>
</div>
</div>
</div>
知道这些之后，我们就可以来定义滚动条样式了，对于同⼀页⾯多个滚动条，官⽅推荐如下的写法：
//每个容器都有个ID，如第⼀个是_mCS_1，如第⼆个是_mCS_2，如第三个是_mCS_3
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
// 1st scrollbar
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
// 2nd scrollbar
}
._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
// 3rd scrollbar
}
例如：
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; } //⼩滚动条的背景⾊
._mCS_1 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: blue; } //⼩滚动条hover上去的颜⾊._mCS_1 #mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; } //⼩滚动条的宽⾼
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{width:10px;} //长滚动条的宽⾼
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail:hover{background:yellow;} //长滚动条hover上去的颜⾊._mCS_1 .mCSB_scrollTools .mCSB_buttonUp{background-position:-83px 0;} //⼩铵钮图标背景
._mCS_1 .mCSB_scrollTools .mCSB_buttonDown{background-position:-83px 0;} //⼩铵钮图标背景
._mCS_1 ._mCS_1 .mCSB_inside > .mCSB_container{margin-right:0px;} //内容与滚动条的距离
._mCS_1 .mCSB_scrollTools{right:0px;} //滚动条的位置
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论