mCustomScrollbar 滚动条的使用

Posted 冰泪恋心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mCustomScrollbar 滚动条的使用相关的知识,希望对你有一定的参考价值。

前两天需要设置滚动条的样式,一开始我以为只是用css设置就可以了,嗯,果然还是想的很简单,虽然可以在css设置滚动条样式,但是只是在火狐,IE浏览器上根本就不能用,所以只能使用js插件来设置滚动条的属性。从网上查的mCustomScrollbar。现在给大家介绍一下这个插件的使用。其实前两天发现swiper中也有关于滚动条的设置,有兴趣的可以看一下。

官网地址:http://manos.malihu.gr/jquery-custom-content-scroller/     

参考文献:https://www.cnblogs.com/alantao/p/5239262.html

使用方法:

需要引入的文件:

    jquery.mCustomScrollbar.js
   jquery.mousewheel.min.js
   jquery.mCustomScrollbar.css

这三个文件是必须要引入的,因为这个插件是基于jQuery的,所以js的引入顺序也需要注意:

首先引入样式文件:

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

 

接下来引入js文件,需要引入一下4个js文件,注意一下引入顺序

<script src="jquery.min.js"></script>
<script src="jqueryUI.min.js"></script>
<script src="mCustomScrollbar.js"></script>
<script src="jquery.mousewheel.min.js"></script>

使用方法

$(function(){
  $(selecter).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 如果页面中有很多滚动条的时候 它有可能会产生额外的移出 你可以使用 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 回调函数的时间间隔 毫秒单位

 

例子

$(\'.search-result\').mCustomScrollbar("scrollTo","p.load-box:last",{
                    scrollButtons:{
                        enable:false,
                        scrollType:"continuous",
                        mouseWheel:true,
                        scrollInertia:10000
                    },
                    advanced:{
                        updateOnBrowserResize:true,
                        updateOnContentResize:false,
                        autoExpandHorizontalScroll:false,
                        autoScrollOnFocus:true
                    },
                    horizontalScroll:false,
                    callbacks:{
                        onScroll:function(){}
                        },
                        whileScrolling:function(){}
                    }
                });

 

以上是关于mCustomScrollbar 滚动条的使用的主要内容,如果未能解决你的问题,请参考以下文章

jquery mCustomScrollbar 滚动条宽度的设置

如何使用 CSS 设置 mCustomScrollbar 的宽度

mCustomScrollbar 滚动按钮 - 滚动类型:“步进”

使用 mCustomScrollbar 一次滚动一个元素

左侧滚动条

带有自定义滚动条 (mCustomScrollbar) 的自定义选择 (Nice select)