当前位置: 首页 >> HTML+CSS >> [推荐]jQuery自定义网页滚动条样式插件mCustomScrollbar

[推荐]jQuery自定义网页滚动条样式插件mCustomScrollbar

发表时间:2014-09-08 21:34  |  1条评论  |  点击数:2511  |  作者:jws132

一个框架里网页内容太多就会使用滚动条,这个已经很常见了,一般时候都是采用默认的样式,但是随着产品要求越来越高,需要我们优化滚动条。目前自定义的滚动条插件诸多,比如iscroll、jscroll,jScrollPane等等,BUG很多,既不能兼容各种终端,又不能很好的兼容自适应,更不用谈响应式布局了。今儿就推荐一款很牛X的插件:jQuery自定义网页滚动条样式插件mCustomScrollbar。

mCustomScrollbar介绍

它是可定制的自定义滚动条的jQuery插件。其特点包括垂直或水平滚动条,可调滚动箭头,鼠标滚轮(通过鼠标滚轮的jQuery插件),键盘和触摸支持,可以通过自定义CSS主题,RTL方向的支持,用户可以定义回调函数等等。适用于各种终端,牛掰啊!

前期准备工作

首先我们要从官网上去下载最新的压缩包。请猛搓这里:mCustomScrollbar ,下载完压缩包后解压,我们发现很多JS,其实用不到那么多,我目前只要用到jquery.mCustomScrollbar.concat.min.js和jquery-1.9.1.min.js,我觉得这已经够了,其他的JS可以暂不理睬了。然后我们把CSS【jquery.mCustomScrollbar.css】和图【mCSB_buttons.png】存放到对应项目的文件夹内。注意:如果修改了图片的存放路径,记得要改下CSS图片的调用路径哦!下面具体看下如何调用:

JS:

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->   

CSS:

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

<link rel="stylesheet" href="css/style.css">

HTML:

<div class="content">内容</div>

说明:

1、这个调用方法是mCustomScrollbar最新版3.X的,相比2.X版本优化了很多。

2、建议把jquery.mCustomScrollbar.css合并到项目公用CSS文件里去,减少请求!这里我只是为了让大家看明白,没有合并到style.css里。

3、对.content定义overflow,高度(或最大高度)的属性,相信大家比我还清楚,:-)

mCustomScrollbar原理

跟大多数滚动插件差不多,它首先获取要修改滚动条样式的内容区块,然后使用 CSS 隐藏掉默认滚动条,然后使用 Javascript 添加很多 HTML 结构,再配合 CSS 做出一个滚动条的效果。然后再使用 CSS 定义滚动条的样式,使用 Javascript 相应鼠标的滚动事件,产生滚动下滑的效果。

mCustomScrollbar应用

上面准备工作已做好,开始应用吧。

使用JS调用mCustomScrollbar,代码如下:

  1. <script type="text/javascript">   

  2.     (function($){   

  3.         $(window).load(function(){   

  4.             $(".content").mCustomScrollbar();   

  5.         });   

  6.     })(jQuery);   

  7. </script>  

这里官方使用了(function($){ … })(jQuery);来包裹 jQuery 代码,这是为了避免 jQuery 和其他的 库 在使用中产生冲突。还用了window load ($(window).load()) 来激活插件功能,因为这样,就可以保证在页面对象全部加载完成之后,加载插件。当然,你也可以使用常规的 jQuery 代码加载方法,但是你要明白 ready 和 load 方法之间的不同。一般的 jQuery 代码加载方法如下:

  1. <script type="text/javascript">   

  2.     (function($){   

  3.         $(document).ready(function(){   

  4.             $(".content").mCustomScrollbar();   

  5.         });   

  6.     })(jQuery);   

  7. </script>  

默认情况下,脚本应用于垂直滚动条。我们可以自定义添加一个水平或2轴滚动条,调用mCustomScrollbar功能与分别设置为“x”或“YX”轴选项,代码如下:

水平:

  1. $(".content").mCustomScrollbar({   

  2.     axis:"x" // horizontal scrollbar   

  3. });  

YX:

  1. $(".content").mCustomScrollbar({   

  2.     axis:"yx" // vertical and horizontal scrollbar   

  3. });  

说到这里,为了让大家弄明白点,我们看个简单案例吧,请猛戳这里:Demo

如果要改变滚动条的外观,我们可以在jquery.mCustomScrollbar.css设定主题选项参数。

此外,您可能需要在一个页面多次调用mCustomScrollbar,可以设置不同的选项(配置选项和参数后面会说明)。看下代码:

  1. <script type="text/javascipt">   

  2.   (function($){   

  3.     $(window).load(function(){   

  4.       $("#vertical-content").mCustomScrollbar({   

  5.         theme:"light-3",   

  6.         scrollButtons:{   

  7.           enable:true  

  8.         }   

  9.       });   

  10.       $("#horizontal-content").mCustomScrollbar({   

  11.         axis:"x",   

  12.         theme:"3d"  

  13.       });   

  14.     });   

  15.   })(jQuery);   

  16. </script>  

配置选项和参数说明

  • set_width:false | 设置你内容的宽度 值可以是像素或者百分比

  • set_height:false | 设置你内容的高度 值可以是像素或者百分比

  • horizontalScroll:Boolean | 是否创建一个水平滚动条 默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false

  • scrollInertia:Integer | 滚动的惯性值 在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)

  • scrollEasing:String | 滚动动作类型 

  • 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 你可以根据内容的动态变化自动调整大小

  • advanced:{   autoScrollOnFocus:Boolean   } | 是否自动滚动到聚焦中的对象 例如表单使用类似TAB键那样跳转焦点 值:true false

  • callbacks:{   onScrollStart:function(){}   } | 使用自定义的回调函数在滚动时间开始的时候执行 

  • callbacks:{   onScroll:function(){}   } | 自定义回调函数在滚动中执行 Demo 同上

  • callbacks:{   onTotalScroll:function(){}  } | 当滚动到底部的时候调用这个自定义回调函数 Demo 同上

  • callbacks:{   onTotalScrollBack:function(){}   } | 当滚动到顶部的时候调用这个自定义回调函数 Demo 同上

  • callbacks:{   onTotalScrollOffset:Integer   } | 设置到达顶部或者底部的偏移量 像素单位

  • callbacks:{  whileScrolling:function(){}  } | 当用户正在滚动的时候执行这个自定义回调函数

  • callbacks:{  whileScrollingInterval:Integer  } | 设置调用 whileScrolling 回调函数的时间间隔 毫秒单位

上面只是列举了一些常用的,如果想看更加详情的,请猛戳这里:更多配置选项和参数说明

相关mCustomScrollbar方法

1、update

用法:$(selector).mCustomScrollbar(“update”);

调用 mCustomScrollbar 函数的 update 方法去实时更新滚动条当内容发生变化(例如 通过 Javascript 增加或者移除一个对象、通过 ajax 插入一段新内容、隐藏或者显示一个新内容等)

2、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 });

3、disable

用法:$(selector).mCustomScrollbar(“disable”);

调用 disable 方法去使滚动条不可用。如果想使其重新可用,调用 update方法。disable 方法使用一个可选参数(默认 false)你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。例如:

$(".content").mCustomScrollbar("disable",true);

可以看一些使用 disable 的例子

4、distroy

用法:$(selector).mCustomScrollbar(“destroy”);

调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式

可以看一些使用 destroy 的例子

定义mCustomScrollbar以及一个页面多次使用

我们可以这样来设置,如下代码:

  1. .mCSB_1_scrollbar .mCSB_dragger .mCSB_dragger_bar{   

  2.     /* 1st scrollbar dragger style... */  

  3. }   

  4. .mCSB_2_scrollbar .mCSB_dragger .mCSB_dragger_bar{   

  5.     /* 2nd scrollbar dragger style... */  

  6. }   

  7. .mCSB_3_scrollbar .mCSB_dragger .mCSB_dragger_bar{   

  8.     /* 3rd scrollbar dragger style... */  

  9. }  

我们还可以看下关于滚动条的图解,相信会更加清晰,如下:

说到这里我们可以看下两个案例,请猛戳这里:Demo1Demo2

自定义回调

你可以通过调用mCustomScrollbar回调选项参数来触发你自己的js函数

  1. $(".content").mCustomScrollbar({   

  2.     callbacks:{   

  3.         onScroll:function(){   

  4.             myCustomFn(this);   

  5.         }   

  6.     }   

  7. });   

  8.   

  9. function myCustomFn(el){   

  10.     console.log(el.mcs.top);   

  11. }  

在上面的例子中,每个滚动事件结束的时间和内容已经停止滚动,内容顶部将被记录在浏览器的控制台。对于每个滚动事件都有对应的回调函数,如下:

  • &diams; onScrollStart -触发滚动事件开始的那一刻

  • &diams; whileScrolling -当滚动事件被触发运行

  • &diams; onScroll -触发滚动事件完成时

  • &diams; onTotalScroll -触发时,内容已经滚动一路向下或向右

  • &diams; onTotalScrollBack -触发时,内容已经滚动或离开所有的方式回到顶部

您可以通过分别设置onTotalScrollOffset和onTotalScrollBackOffset,为onTotalScroll和onTotalScrollBack设置一个偏移值(像素)。例如,下面将触发回调函数,当内容已滚动至底部时减去100像素

  1. $(".content").mCustomScrollbar({   

  2.     callbacks:{   

  3.         onTotalScroll:function(){   

  4.             console.log("scrolled to bottom");   

  5.         },   

  6.     onTotalScrollOffset:100   

  7.     }   

  8. });  

返回值

该脚本返回一个数字值和对象相关的滚动条

  • &diams; this – 包含滚动条的原始元素(S)

  • &diams; this.mcs.content – 原始内容包装为jQuery对象

  • &diams; this.mcs.top – 内容的顶部位置(像素)

  • &diams; this.mcs.left – 内容的左侧位置(像素)

  • &diams; this.mcs.draggerTop – 滚动牵引机的顶部位置(像素)

  • &diams; this.mcs.draggerLeft – 滚动条牵引机的左侧位置(像素)

  • &diams; this.mcs.topPct – 内容垂直滚动的百分比

  • &diams; this.mcs.leftPct – 内容水平滚动的百分比

  • &diams; this.mcs.direction – 内容的滚动方向(Y或X)

示例

  1. $("#content_1").mCustomScrollbar({   

  2.     callbacks:{   

  3.         whileScrolling:function(){   

  4.             myCustomFn(this);   

  5.         }   

  6.     }   

  7. });   

  8.   

  9. function myCustomFn(el){   

  10.     var msg="Content inside the element with id '"+el.attr("id")+"' has scrolled "+mcs.topPct+"%";   

  11.   console.log(msg);   

  12. }  

插件要求

在我们引入JQ库文件的时候,目前3X版本要求最低版本V1.6.0,这点要大伙要注意啦。

总结

终于写完了,今天下午2点半出现小插曲,公司突然停电,我都快要气炸了,花好长时间搞的东西就这样废了吗,还好锅这后台有还原功能,虚惊一场。也提醒大家,项目中经常记得保存吧。

参考地址:http://manos.malihu.gr/jquery-custom-content-scroller/

网友评论 1条评论
  
  • 全部评论
  • 头像
    2017-09-09 05:08:30
    7wDvpm http://www.FyLitCl7Pf7ojQdDUOLQOuaxTXbj5iNG.com
  • 站主信息
网名:小白 | ゞ_Shuつ
姓名:蒋文书
生日:1990-05-22
籍贯:浙江省—温州市
现居:北京市—昌平区
职业:网站设计、网站制作。今后想成为一名高级程序员
爱好:研究java,php编程,打球,唱歌,登山。
喜欢的书:《红与黑》《红楼梦》
喜欢的歌手:黄家驹 Rain 六哲
网站信息:本站正在完善中下步会新增用户中心预计完成在7月中旬
  • 热门关注
  • 资深旅游达人,走南闯北,半年写完超长游记...

  • 资深旅游达人,走南闯北,半年写完超长游记...

  • 资深旅游达人,走南闯北,半年写完超长游记...

  • 【聚会】22日跟大闽网友一起看世界杯,小龙虾啤酒通通免费吃...[详细]

  • 【福利】带孩子玩水不要钱!50份白水洋套票免费送了...[详细]

  • 【福利】熬夜看球太累太伤?没关系!养生粤菜免费吃起来...[详细]

  • 【独家】送福利来了,空调挂机免费清洗,快来回帖报名吧...[详细]

  • 【独家】猜世界杯冠军,8套1088元纯金纪念钞免费送! ...[详细]

Copyright © 2013-2016 . 蒋文书个人博客 版权所有 浙ICP备16006289号