mCustomScrollbar的使用

作者: lvyweb | 来源:发表于2017-04-19 20:58 被阅读2397次

mCustomScrollbar的使用
自定义左侧导航-1
滚动条插件 mCustomScrollbar 使用介绍
mCustomScrollbar IE滚动慢的解决办法
mCustomScrollbar.js 漂亮的滚动条插件适应内
iconfont的使用（下载使用）
Gson的使用--使用注解
记录使用iframe的使用
with的使用
this的使用

想要实现一个自定义且主题好看的滚动条可以使用slimscroll和mCustomScrollbar、但是前者不能实现同时y轴和x轴，后者就可以，当然，插件越强大相对应的参数就多了，下面介绍一些基本使用。

基本使用

可以先下载或者先看看demo

第一步、加载mCustomScrollbar样式文件`mCustomScrollbar.css`

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

第二步、加载必须的js、有两个`jquery`和`jquery.mCustomScrollbar.min.js`还有`mCSB_buttons.png`

jquery是必须的
jquery.mCustomScrollbar.min.js 是插件的主文件
mCSB_buttons.png是插件中各种箭头的精灵图
eg: <script type="text/javascript" src="../js/minified/jquery-1.11.0.min.js"></script>
<script type="text/javascript"src="../js/minified/jquery.mCustomScrollbar.min.js"></script>

第三步、应用mCustomScrollbar

<script type='text/javascript'>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

第四步、在页面中添加内容和 mCustomScrollbar 的样式

自定义滚动条的样式，必须要出现滚动条才可以，下面给出一个小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条的实现</title>
    <style>
        #box{
            /* 外层包裹要设置宽和高，还有overflow:hidden; */
            width:400px;
            height:400px;
            overflow:hidden;
            margin: 100px auto;
            /* border: 1px solid #000; */
        }
        .content{
            /* 内容区域高度自适应 */
            white-space:nowrap; 
            width: 100%; 
            height: 100%;
            background-color: skyblue;
        }
    </style>
    <!-- 这个 CSS 文件是让我们来定义边栏用的 -->
    <link rel="stylesheet" type="text/css" href="../jquery.mCustomScrollbar.css">
</head>
<body>
<div id="box">
    <div class="content">
        <p>The element(s) you want to add scrollbar(s) should have the typical CSS properties of an overflowed block which are a height (or max-height) value, an overflow value of auto (or hidden) and content long enough to require scrolling. For horizontal scrollbar, the element should have a width (or max-width) value set.</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
       
    </div>
    
</div>


<!-- 加载必须的js -->
<script type="text/javascript" src="../js/minified/jquery-1.11.0.min.js"></script>
<!-- 扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。  -->
<!-- <script type="text/javascript" src="../js/minified/jquery-ui-1.10.4.min.js"></script>   -->
<!-- 伟大的只有2kb的插件，它面向所有的操作系统和浏览器，为我们提供了鼠标滚动事件的支持。 -->
<!-- <script type="text/javascript" src="../js/minified/jquery.mousewheel.min.js"></script>  -->
<!-- 插件的主文件 -->
<script type="text/javascript" src="../js/minified/jquery.mCustomScrollbar.min.js"></script>    

<script type='text/javascript'>
    (function($){
       $(window).on("load",function(){
            $("#box").mCustomScrollbar({
                axis:"yx",
                scrollButtons:{enable:true},
                theme:"3d-dark",
                scrollbarPosition:"outside",
                callbacks:{ onScroll:function(){
                    console.log('滚动开始');
                } },
                    
            });
            });
    })(jQuery);
</script>
</body>
</html>

显示效果：

demo效果

参数配置

轴

默认情况下，出现的是垂直滚动条。要添加水平或2轴滚动条，要将轴选项设置为"x"或"yx"分别调用mCustomScrollbar函数

$(".content").mCustomScrollbar({
    axis:"x" // 水平滚动条
});

$(".content").mCustomScrollbar({
    axis:"yx" // 水平和垂直滚动条
});

主题

主题的设置可以通过html设置也可以通过Javascript设置

<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- 你的内容 -->
</div>

也可以通过JavaScript设置

$(".content").mCustomScrollbar({
    theme:"dark"
});

参数列表

参数	说明
`setWidth: false`	设置你内容的宽度值可以是像素或者百分比
`set_height:false`	设置你内容的高度值可以是像素或者百分比
`axis: "string"`	定义内容的滚动条值可以是 y，x，yx。其中分别为y轴滚动条，x轴滚动，x和y轴滚动条
`scrollbarPosition: "string"`	设置滚动条相对于内容的位置。可用值："inside"，"outside"。 "inside"（默认）使滚动条出现在元素内。 "outside"使滚动条出现在元素之外。请注意，将值设置为"outside"要求您的元素（或父元素）具有CSS position: relative（否则滚动条将与文档的根元素相关）。
`autoHideScrollbar: boolean`	禁用或者启用在不使用滚动条的时候隐藏，设置为true为启用，false为禁用。注意：一些特殊的主题，例如`minimal`会覆盖这个选项
`scrollButtons:{ scrollAmount: boolean }`	`scrollButtons:{enable:true},` true表示显示，false表示不显示
`scrollButtons:{ scrollAmount: "string" }`	`scrollButtons:{scrollType : "stepped"},`stepless表示按住按钮是不断滚动，stepped表示每次点击固定一定的量（可在scrollAmount设置）
`scrollButtons:{ scrollAmount: integer }`	设置滚动量以像素为单位，默认值"auto"根据可滚动内容长度调整滚动量。
`advanced:{ autoExpandHorizontalScroll: true }`	自动扩大水平滚动条的长度值:true,false 设置 true 你可以根据内容的动态变化自动调整大小
`advanced:{ updateOnContentResize: boolean }`	自动根据动态变换的内容调整滚动条的大小值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小建议除非必要不要设置成 true 如果页面中有很多滚动条的时候它有可能会产生额外的移出你可以使用 update 方法来替代这个功能
`advanced:{ updateOnImageLoad: boolean }`	每当元素中的图像完全加载时，会自动更新滚动条。
`advanced:{ updateOnBrowserResize:Boolean }`	根据百分比为自适应布局调整浏览器上滚动条的大小值:true,false 设置 false 如果你的内容块已经被固定大小
`callbacks:{onScroll: function(){}}`	自定义回调函数在滚动中执行

mCustomScrollbar的方法

update

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

$("#treeDemo").mCustomScrollbar({
            // horizontalScroll:true,//横向滚动
            axis:"yx",
            scrollButtons:{
                enable:true,//设置是否显示按钮
                scrollType : "stepped" //点击按钮不松开时滚动的类型： "stepless"(按钮一直按下时，内容持续滚动)
            },//箭头是否显示
            theme:"3d-dark",            //滚动条主题
            scrollbarPosition:"inside",//滚动线的位置，在容器内部还是外部 inside(default)|outside (如果容器的position是static值，则添加position:relative)
            autoDraggerLength: true,//根据内容区域自动调整滚动条拖块的长度 
            autoExpandScrollbar: true,
            callbacks:{ onScroll:function(){
                console.log("开始滚动了");
            } }
    
        });
        
        $("#treeDemo").mCustomScrollbar("update");// 实时更新滚动条当内容发生变化

scrollTo

用法：$(selector).mCustomScrollbar("scrollTo",position,options);

你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串（例如 “#element-id”，“bottom” 等）描述或者是一个数值（像素单位）。下面的例子将会滚动到最下面的对象.

"bottom" – 滚动到底部（垂直滚动条）
"top" – 滚动到顶部（垂直滚动条）
"right" – 滚动到最右边（水平滚动条）
"left" – 滚动到最左边（水平滚动条）
"first" – 滚动到内容区域中的第一个对象位置
"last" – 滚动到内容区域中的最后一个对象位置
"Integer"-滚动到内容区域中的最后一个对象位置

eg:$(".content").mCustomScrollbar("scrollTo","last");

destroy

用法：$(selector).mCustomScrollbar("stop");
调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式（当希望中断之前的scrollTo方法调用时有用）。

要禁用滚动条并重置其内容位置，请将方法的重置参数设置为true
$(selector).mCustomScrollbar("disable",true);

/* 初始化 */
$(selector).mCustomScrollbar();

/* 禁用滚动条 */
$(selector).mCustomScrollbar("disable");

/* 启用滚动条 */
$(selector).mCustomScrollbar("update");

自定义滚动条主题

定义主题、最简单最快的方式使用插件自带的主题

$(selector).mCustomScrollbar({
  theme:"dark"
});

如果插件带的主题不能满足你的需求，可以自定义主题

创建一个新的主题

$(selector).mCustomScrollbar({
    theme:"my-theme"
});

你的元素将获得类“mCS-my-theme”（你的主题名称带有“mCS”前缀），因此你可以使用.mCS-my-theme规则创建你的CSS 。例如：

.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; } 
...

mCustomScrollbar的使用
想要实现一个自定义且主题好看的滚动条可以使用slimscroll和mCustomScrollbar、但是前者不能实...
自定义左侧导航-1
使用的插件 BootStrap3.3.5 jQuery2.0 mCustomScrollbar（自定义滚动条） /...
滚动条插件 mCustomScrollbar 使用介绍
用法 HTML 在HTML文档头部引入mCustomScrollbar.css 在body的结束标签之前引入插件所...
mCustomScrollbar IE滚动慢的解决办法
搜索：e.deltaFactor<5 && !o.mouseWheel.normalizeDelta 大概在105...
mCustomScrollbar.js 漂亮的滚动条插件适应内
iconfont的使用（下载使用）
1、下载文件 2、在生命周期中引入项目 beforeCreate () { var domModule = ...
Gson的使用--使用注解
Gson为了简化序列化和反序列化的过程，提供了很多注解，这些注解大致分为三类，我们一一的介绍一下。自定义字段的名...
记录使用iframe的使用
默认记录一下----可以说这是我第一次使用iframe 之前都没有使用过；使用方式：自己开发就用了这几个属...
with的使用
下面例子可以具体说明with如何工作：运行代码，输出如下
this的使用
什么是this? this是一个关键字,这个关键字总是返回一个对象;简单说，就是返回属性或方法“当前”所在的对象。...