mCustomScrollbar 滚动条插件的使用

步骤：

1：加入样式表和脚本

2：注册mCustomScrollbar

$(".content").mCustomScrollbar({
	set_width:false,
	set_height:false,
	horizontalScroll:false,
	scrollInertia:550,
	scrollEasing:"easeOutCirc",
	mouseWheel:"auto",
	autoDraggerLength: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
	}
});

常用参数：

set_width:false：设置你内容的宽度值可以是像素或者百分比
set_height:false：设置你内容的高度值可以是像素或者百分比
horizontalScroll:Boolean：是否创建一个水平滚动条默认是垂直滚动条值可为:true(创建水平滚动条) 或 false
scrollInertia:Integer：滚动的惯性值在毫秒中使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)
scrollEasing:String：滚动动作类型查看 jquery UI easing 可以看到所有的类型
mouseWheel:String/Boolean：鼠标滚动的支持值为:true.false,像素默认的情况下鼠标滚动设置成像素值填写false取消鼠标滚动功能
mouseWheelPixels:Integer：鼠标滚动中滚动的像素数目值为以像素为单位的数值
autoDraggerLength:Boolean：根据内容区域自动调整滚动条拖块的长度值:true,false
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 如果页面中有很多滚动条的时候它有可能会产生额外的移出你可以使用 update 方法来替代这个功能
advanced:{ autoExpandHorizontalScroll:Boolean }：自动扩大水平滚动条的长度值:true,false 设置 true 你可以根据内容的动态变化自动调整大小可以看Demo
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 回调函数的时间间隔毫秒单位

scrollTo 方法的参数注意修改了scrollTo后不用update，不然会初始化从而达不到效果

$(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);：滚动到某个位置（像素单位）

自定义主题：主题名：my-theme 注册的时候主题名改成"my-theme" 可根据自己的实际情况修改背景色

.mCS-my-theme .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #333333; }
.mCS-my-theme .mCSB_scrollTools .mCSB_draggerRail{ background-color: #333333; }

.mCS-my-theme .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color: #808080;}

.mCS-my-theme .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {background-color: #808080;}

posted on 2016-12-14 10:30 阿兴的平凡世界阅读(258) 评论(0) 收藏举报

刷新页面返回顶部

阿兴

mCustomScrollbar 滚动条插件的使用

导航

公告