mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等。(HTML必须存在于文档流, 不能为display:none)

1.如何使用 mCustomScrollbar(必须要加载如下的4个文件)

jquery.mCustomScrollbar.js
jquery.mousewheel.min.js
jquery.mCustomScrollbar.css
mCSB_buttons.png

jQuery:这个插件的必备库
jQuery UI:扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。
jquery.mousewheel.min.js:这是 Brandon Aaron 编写的一个伟大的只有2kb的插件,它面向所有的操作系统和浏览器,为我们提供了鼠标滚动事件的支持。
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, jquery.mousewheel.min.js 和 jquery.mCustomScrollbar.js 这四个。
jQuery 和 jQuery UI 是必须的, jquery.mousewheel.min.js 是用来提供滚动支持的,jquery.mCustomScrollbar.js 则是插件的主文件。
<script src="js/jquery.mCustomScrollbar.js" type="text/javascript"><\/script>
<script src="js/jquery.mousewheel.min.js" type="text/javascript"><\/script>

第三步:应用 mCustomScrollbar

$(function(){
  $("#id").mCustomScrollbar();
})

mCustomScrollbar 的参数介绍

  1. setWidth: false //设置你内容的宽度 值可以是像素值或者百分比(string),取值300,"30%"
  2. setHeight: false //设置你内容的高度 值可以是像素值或者百分比(string),取值300,"30%"
  3. setTop: 0 //设置一开始纵向滚动的位置,取值"100px",值为字符串
  4. setLeft: 0 //设置一开始横向滚动的位置,取值"100px",值为字符串
  5. axis: "string" //"x","y",值为字符串,分别对应横纵向滚动
  6. scrollInertia:Integer //滚动的惯性值 在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)
  7. scrollbarPosition: "string" //取值"inside","outside",值为字符串,父元素必须是relative定位,滚动条出在元素的内部(inside)或者外部(outside);
  8. autoDraggerLength:Boolean //根据内容区域自动调整滚动条拖块的长度 值:true,false
  9. alwaysShowScrollbar:Integer //保持滚动条的显示,取值0,1(保持滚动块可见),2(保持滚动条所有的显示)
  10. mouseWheel:{
  11. enable: boolean //启用或禁用通过鼠标滚轮滚动内容。
  12. scrollAmount: Integer //滚轮滚动的像素
  13. invert: boolean //反转滚动方向
  14. }
  15.  
  16. scrollButtons:{ enable:Boolean } //是否添加 滚动条两端按钮支持 值:true,false
  17. scrollButtons:{ scrollType:String } //滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子
  18. scrollButtons:{ scrollSpeed:Integer } //设置点击滚动按钮时候的滚动速度(默认 20) 设置一个更高的数值可以更快的滚动
  19. scrollButtons:{ scrollAmount:Integer } //设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素
  20.  
  21. advanced:{ updateOnBrowserResize:Boolean } //根据百分比为自适应布局 调整浏览器上滚动条的大小 值:true,false 设置 false 如果你的内容块已经被固定大小
  22. advanced:{ updateOnContentResize:Boolean } //自动根据动态变换的内容调整滚动条的大小 值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小 建议除非必要不要设置成 true 如果页面中有很多滚动条的时候 它有可能会产生额外的移出 你可以使用 update 方法来替代这个功能
  23. advanced:{ autoExpandHorizontalScroll:Boolean } //自动扩大水平滚动条的长度 值:true,false 设置 true 你可以根据内容的动态变化自动调整大小 可以看Demo
  24. advanced:{ autoScrollOnFocus:Boolean } //是否自动滚动到聚焦中的对象 例如表单使用类似TAB键那样跳转焦点 值:true false
  25.  
  26. callbacks:{ onScrollStart:function(){} } //使用自定义的回调函数在滚动时间开始的时候执行 具体请看Demo
  27. callbacks:{ onScroll:function(){} } //自定义回调函数在滚动中执行 Demo 同上
  28. callbacks:{ onTotalScroll:function(){} } //当滚动到底部的时候调用这个自定义回调函数 Demo 同上
  29. callbacks:{ onTotalScrollBack:function(){} } //当滚动到顶部的时候调用这个自定义回调函数 Demo 同上
  30. callbacks:{ onTotalScrollOffset:Integer } //设置到达顶部或者底部的偏移量 像素单位
  31. callbacks:{ whileScrolling:function(){} } //当用户正在滚动的时候执行这个自定义回调函数
  32. callbacks:{ whileScrollingInterval:Integer } //设置调用 whileScrolling 回调函数的时间间隔 毫秒单位

//默认值

  1. (function($){
  2. $(document).ready(function(){
  3. $("#content").mCustomScrollbar({
  4. setWidth: false,
  5. setHeight: false,
  6. setTop: 0,
  7. setLeft: 0,
  8. axis: "y",
  9. scrollInertia:0,
  10. scrollbarPosition: "inside",
  11. autoDraggerLength:false
  12. autoExpandScrollbar:true
  13. alwaysShowScrollbar:2
  14. mouseWheel:{
  15. enable:true
  16. scrollAmount:10
  17. preventDefault:true
  18. invert:true
  19. },
  20. scrollButtons:{
  21. enable:false,
  22. scrollType:"continuous",
  23. scrollSpeed:20,
  24. scrollAmount:40
  25. },
  26. advanced:{
  27. updateOnBrowserResize:true,
  28. updateOnContentResize:false,
  29. autoExpandHorizontalScroll:false,
  30. autoScrollOnFocus:true
  31. },
  32. callbacks:{
  33. onScrollStart:function(){},
  34. onScroll:function(){},
  35. onTotalScroll:function(){},
  36. onTotalScrollBack:function(){},
  37. onTotalScrollOffset:0,
  38. whileScrolling:false,
  39. whileScrollingInterval:30
  40. }
  41. });
  42. });
  43. })(jQuery);

mCustomScrollbar 的使用方法

update

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

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

下面是例子:

$(".content .mCSB_container").append("<p>New content here...</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");
});
当新内容完全加载或者动画完成之后,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 结构

  1. //垂直滚动条结构:
  2. <div class="content mCustomScrollbar _mCS_1">
  3. <div class="mCustomScrollBox">
  4. <div class="mCSB_container">
  5. <!-- your long content here... -->
  6. </div>
  7. <div class="mCSB_scrollTools">
  8. <a class="mCSB_buttonUp"></a>
  9. <div class="mCSB_draggerContainer">
  10. <div class="mCSB_dragger ui-draggable">
  11. <div class="mCSB_dragger_bar"></div>
  12. </div>
  13. <div class="mCSB_draggerRail"></div>
  14. </div>
  15. <a class="mCSB_buttonDown"></a>
  16. </div>
  17. </div>
  18. </div>
  19.  
  20. //水平滚动条 mCSB_buttonUp 和 mCSB_buttonDown 这两个 a 标签只有当你启用了 scroll buttons 功能的时候,才可用。
  21. <div class="mCustomScrollBox mCSB_horizontal">
  22. <div class="mCSB_container">
  23. <!-- your long content here... -->
  24. </div>
  25. <div class="mCSB_scrollTools">
  26. <a class="mCSB_buttonLeft"></a>
  27. <div class="mCSB_draggerContainer">
  28. <div class="mCSB_dragger ui-draggable">
  29. <div class="mCSB_dragger_bar"></div>
  30. </div>
  31. <div class="mCSB_draggerRail"></div>
  32. </div>
  33. <a class="mCSB_buttonRight"></a>
  34. </div>
  35. </div>
  36. </div>

知道这些之后,我们就可以来定义滚动条样式了,对于同一页面多个滚动条,官方推荐如下的写法:
//每个容器都有个ID,如第一个是_mCS_1,如第二个是_mCS_2,如第三个是_mCS_3

  1. ._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  2. // 1st scrollbar dragger style...
  3. }
  4. ._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  5. // 2nd scrollbar dragger style...
  6. }
  7. ._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  8. // 3rd scrollbar dragger style...
  9. }

例如:

  1. ._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ } //小滚动条的背景色
  2. ._mCS_1 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ } //小滚动条hover上去的颜色
  3. ._mCS_1 #mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; }            //小滚动条的宽高
  4. ._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{width:10px;}            //长滚动条的宽高
  5. ._mCS_1 .mCSB_scrollTools .mCSB_draggerRail:hover{background:yellow;}            //长滚动条hover上去的颜色
  6. ._mCS_1 .mCSB_scrollTools .mCSB_buttonUp{background-position:-83px 0;}            //小铵钮图标背景
  7. ._mCS_1 .mCSB_scrollTools .mCSB_buttonDown{background-position:-83px 0;}            //小铵钮图标背景
  8. ._mCS_1 ._mCS_1 .mCSB_inside > .mCSB_container{margin-right:0px;}            //内容与滚动条的距离
  9. ._mCS_1 .mCSB_scrollTools{right:0px;}            //滚动条的位置

转载:https://www.cnblogs.com/alantao/p/5239262.html

自定义滚动条mCustomScrollbar的更多相关文章

  1. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

  2. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  3. 使用jquery.mCustomScrollbar自定义滚动条(4)live使用,向未来元素添加滚动条,不实用,了解一下

    .div_box元素是本来没有的,在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面,参数live:on; 点击按钮的时候,进行con ...

  4. 使用jquery.mCustomScrollbar自定义滚动条(3)callback onCreate

    碰到了一个问题,想简洁,所以在页面上使用 <div class="div_box mCustomScrollbar" data-mcs-theme="dark-3& ...

  5. 使用jquery.mCustomScrollbar自定义滚动条(2)

    参考博客:http://www.qianxingzhem.com/post-1602.html 接着上篇,另一个使用的例子,使用js来初始化滚动条,并且div中的内容可变化.需要调用相应的方法, 代码 ...

  6. 使用jquery.mCustomScrollbar自定义滚动条(1)

    参考博客:https://blog.csdn.net/cdnight/article/details/41351505 api网址:http://manos.malihu.gr/jquery-cust ...

  7. 滚动条mCustomScrollbar自定义

    mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...

  8. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  9. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

随机推荐

  1. cp备份操作时如何忽略指定的目录

    需求场景:进行CP拷贝备份的时候,子目录里面的某些大文件或是一些log文件是无需备份的,那么在CP操作时需要忽略掉指定的目录. 案例演示如下:备份data目录,但是不包括里面的share子目录. 先看 ...

  2. Windows平台下载Android源码(整理)

    Google官方下载源码使用的系统Ubuntu系统,不过现在我们需要在Windows系统中下载Android源码文件. 网站的地址是:https://android.googlesource.com/ ...

  3. java web 测试

    1.功能测试 bugfree mantis 2.性能测试:loadrunner 3.安全测试: burpsuite

  4. ReactNative学习笔记(五)踩坑总结

    已经发现的bug或者问题 Android不支持shadow属性: Animated.Image的borderRadius不生效: setNativeProps无法修改图片的source: 没有直接设置 ...

  5. mac下安装安卓开发环境

    对于做ios的人来说,安装安卓开发环境,最好是在mac下安装了,我的mac是10.8.2,64位系统的 安卓开发环境需要下面几个东西: 1 jdk(mac下已经默认有了,可以在命令提示符下输入java ...

  6. Shell-10--if

  7. LeetCode--No.012 Integer to Roman

    12. Integer to Roman Total Accepted: 71315 Total Submissions: 176625 Difficulty: Medium Given an int ...

  8. 百度Ueditor富文本编辑器 .net版本 任意文件上传执行漏掉修复

    问题描述: 借由上传网络图片功能中可传递可执行文件.后台代码中只做了文件类型的检测未能正确的拦截掉非法文件. 只需将上传地址改为 XXXXXX.jpg?.aspx最终服务上最终存储的文件会变为XXXX ...

  9. 橙色优学:2019年设计行业怎么样?UI设计行业前景分析

    互联网的飞速发展带动了UI行业的火爆,成为时下最热门的高新技术行业.UI设计区别于传统的平面设计,更加注重界面.交互.体验等方面,这使UI设计变为了高薪的行业,对设计师的技能要求也就变得更加严格. 自 ...

  10. 调用 Https WebService 使用程序自动生成代理类

    1 商家提供的WebService接口:  https://ws.nciic.org.cn/nciic_ws/services/NciicServices?wsdl 2 在浏览器里打开这个地址,会显示 ...