自定义滚动条文档（mCustomScrollbar使用文档）

原文地址：http://manos.malihu.gr/jquery-custom-content-scroller/

下载地址：https://download.csdn.net/download/a707369808/10562825

引入css

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

引入js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

要添加滚动条的元素应该具有溢出块的典型CSS属性，这些属性是高度（或最大高度）值，auto（或隐藏）的溢出值和足够长的内容需要滚动。对于水平滚动条，元素应设置宽度（或最大宽度）值。

如果您希望通过javascript设置元素的高度/宽度，则可以使用setHeight/ setWidthoption参数。

初始化

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar();//content为需要增加滚动条的class
        });
    })(jQuery);
</script>

可以直接在您需要增加滚动条的容器增加class=“mCustomScrollbar ”，设置滚动条放向data-mcs-axis，值为x或y，设置主题data-mcs-theme

<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- your content -->
</div>

默认情况下，脚本应用垂直滚动条。要添加水平或2轴滚动条，请在轴选项设置为"x"或"yx"分别调用mCustomScrollbar函数

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

设置主题 具体主题http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html

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

您可以使用mCustomScrollbar function Usage上的以下选项参数配置滚动条
$(selector).mCustomScrollbar({ option: value });

setWidth：false	设置内容的宽度（覆盖CSS宽度），像素值（整数）或百分比（字符串）
setHeight：false	设置内容的高度（覆盖CSS高度），像素值（整数）或百分比（字符串）。
setTop：0	设置内容的初始css top属性，接受字符串值（css top position）。 示例：setTop: "-100px"。
setLeft：0	设置内容的初始css left属性，接受字符串值（css left position）。 示例：setLeft: "-100px"。
axis: "y"	定义内容的滚动轴（添加到元素的滚动条的类型：垂直和/或水平）。 可用值："y"，"x"，"yx"。 axis: "y" - 垂直滚动条（默认） axis: "x" - 水平滚动条 axis: "yx" - 垂直和水平滚动条
scrollbarPosition："string"	设置滚动条相对于内容的位置。 可用值："inside"，"outside"。 设置scrollbarPosition: "inside"（默认）使滚动条出现在元素内。设置scrollbarPosition: "outside"使滚动条显示在元素外部。请注意，将值设置为"outside"需要您的元素（或父元素）具有CSS position: relative（否则滚动条将相对于文档的根元素定位）。
scrollInertia：整数	将滚动动量的量设置为动画持续时间（以毫秒为单位）。 较高的值等于更大的滚动动量，这转化为更平滑/更渐进的动画。设置0为禁用。
autoDraggerLength：boolean	启用或禁用与滚动量相关的自动调整滚动条拖动器长度（与浏览器的本机滚动条相同的行为）。 设置autoDraggerLength: false时，你希望你的滚动条（总是）有固定的大小。
autoHideScrollbar：boolean	启用或禁用非活动时自动隐藏滚动条。当滚动空闲和/或光标不在滚动区域时， 设置autoHideScrollbar: true将隐藏滚动条。 请注意，某些特殊主题（如“minimal”）会覆盖此选项。
autoExpandScrollbar:boolean	光标结束或拖动滚动条时启用或禁用自动展开滚动条。
alwaysShowScrollbar：整数	即使没有可滚动的内容，也始终保持滚动条可见。 alwaysShowScrollbar: 0 - 禁用（默认） alwaysShowScrollbar: 1 - 保持拖拉机轨道可见 alwaysShowScrollbar: 2 - 保持所有滚动条组件（拖动器，导轨，按钮等）可见
snapAmount:整数	使滚动捕捉到固定数量像素的倍数。在滚动表格数据，图像缩略图或幻灯片等情况下非常有用，您需要阻止滚动停止元素的中途。请注意，您的元素必须具有相同的宽度或高度才能使其正常工作。 要为垂直和水平滚动设置不同的值，请使用数组：[y,x]
snapOffset:整数	设置snapAmount选项的偏移量（以像素为单位）。例如，您需要通过表头来偏移表行的捕捉量。
mouseWheel:{enable：boolean}	通过鼠标滚轮启用或禁用内容滚动。
mouseWheel:{scrollAmount:integer}	设置鼠标滚轮滚动量（以像素为单位）。默认值"auto"根据可滚动内容长度调整滚动量。
mouseWheel：{axis:"string"}	当存在垂直和水平滚动条时，定义鼠标滚轮滚动轴。 设置axis: "y"（默认）垂直或axis: "x"水平滚动。
mouseWheel：{preventDefault：boolean}	防止在达到滚动结束或开始时自动滚动父元素的默认行为（与浏览器的本机滚动条相同）。
mouseWheel：{deltaFactor：integer}	设置一个滚轮凹槽滚动的像素数。默认值“auto”使用OS /浏览器值。
mouseWheel：{normalizeDelta：boolean}	启用或禁用鼠标滚轮（delta）加速。设置normalizeDelta: true将鼠标滚轮增量值转换为-1或1。
mouseWheel：{invert：boolean}	反转鼠标滚轮方向。设置为true向上或向右滚动鼠标滚轮向上。
mouseWheel：{disableOver：[array]}	设置当光标位于其上时禁用鼠标滚轮的标签。 默认值： ["select","option","keygen","datalist","textarea"]
scrollButtons：{enable：boolean}	启用或禁用滚动条按钮。
scrollButtons：{scrollAmount：integer}	设置按钮滚动量（以像素为单位）。默认值"auto"根据可滚动内容长度调整滚动量。
scrollButtons：{scrollType：“string”}	定义按钮滚动类型/行为。 scrollType: "stepless" - 按下按钮时连续滚动内容（默认） scrollType: "stepped" - 每个按钮单击滚动内容一定量（在上面的scrollAmount选项中定义）
scrollButtons：{tabindex：integer}	设置按钮的tabindex值。
keyboard：{enable：boolean}	通过键盘启用或禁用内容滚动。 该插件支持方向箭头（上，左，右和下），page-up（PgUp），page-down （PgDn）， Home 和 End 键.
keyboard：{scrollAmount：integer}	设置键盘箭头滚动量（以像素为单位）。默认值"auto"根据可滚动内容长度调整滚动量。
keyboard:{ scrollType: "string" }	定义键盘箭头滚动类型/行为。 scrollType: "stepless" - 按箭头键不断滚动内容（默认） scrollType: "stepped" - 每个密钥版本按内容滚动内容（在上面的scrollAmount选项中定义）
contentTouchScroll：整数	为启用触摸的设备启用或禁用内容触摸滑动滚动。 要完全禁用，请设置contentTouchScroll: false。 整数值定义滚动动量所需的轴特定最小量（默认值:) 25。
documentTouchScroll：boolean	为启用触摸的设备启用或禁用文档触摸滑动滚动。
advanced:{ autoExpandHorizontalScroll: boolean }	水平自动展开内容（for "x"或"yx"axis）。 如果设置为true，则内容将水平扩展以适应任何浮动/内联块元素。 将其值设置为2（整数）会强制非scrollHeight / scrollWidth方法。的值3力scrollHeight属性/ scrollWidth方法。
advanced:{ autoScrollOnFocus: "string" }	设置元素/选择器列表，在聚焦时将内容自动滚动到其位置。 例如，当按TAB键以聚焦输入字段时，如果该字段超出可视区域，则内容将滚动到其顶部/左侧位置（与浏览器的本机滚动条相同的行为）。 要完全禁用此功能，请设置autoScrollOnFocus: false。 默认： "input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']"
advanced:{ updateOnContentResize: boolean }	在内容，元素或视口大小调整时自动更新滚动条。流体布局/元素 的值应该是true（默认），动态添加/删除内容，隐藏/显示元素等。
advanced:{ updateOnImageLoad: boolean }	每次完全加载元素内的图像时，自动更新滚动条。 默认值仅auto触发功能"x"和"yx"轴（如果需要）。 该值应该是true您的内容包含图像并且您需要在任何轴上触发的功能。
advanced:{ updateOnSelectorChange: "string" }	当特定选择器的数量和大小发生变化时，自动更新滚动条。 当您需要自动更新滚动条时，每次添加，删除或更改其大小的元素时都很有用。 例如，updateOnSelectorChange: "ul li"每次更改元素内的列表项时，设置将更新滚动条。 将值设置为true，每次更改任何元素时都会更新滚动条。 要禁用（默认）设置为false。
advanced:{ extraDraggableSelectors: "string" }	添加额外的选择器，它们会在mouseup，pointerup，touchend等时释放滚动条拖动。 示例：extraDraggableSelectors: ".myClass, #myID"
advanced:{ releaseDraggableSelectors: "string" }	添加额外的选择器，允许在mousemove / up，pointermove / up，touchend等时滚动条拖动。 示例：releaseDraggableSelectors: ".myClass, #myID"
advanced:{ autoUpdateTimeout: integer }	设置自动更新超时（以毫秒为单位）。 默认超时：60
theme: "string"	设置滚动条主题。 查看所有可立即使用的主题 所有主题都包含在插件的CSS文件（jquery.mCustomScrollbar.css）中。 默认主题："light"
callbacks:{ onCreate: function(){} }	创建插件标记时调用的函数。 例： callbacks：{ onCreate：function（）{ console.log（“Plugin markup generated”）; } }
callbacks:{ onInit: function(){} }	滚动条初始化（演示）时调用的函数。 例： callbacks：{ onInit：function（）{ console.log（“Scrollbars initialized”）; } }
callbacks:{ onScrollStart: function(){} }	滚动开始时调用的函数（演示）。 例： callbacks：{ onScrollStart：function（）{ console.log（“Scrolling started ...”）; } }
callbacks:{ onScroll: function(){} }	滚动完成时调用的函数（演示）。 例： callbacks：{ onScroll：function（）{ console.log（“滚动的内容......”）; } }
callbacks:{ whileScrolling: function(){} }	滚动时调用的函数处于活动状态（演示）。 例： callbacks：{ whileScrolling：function（）{ console.log（“Scrolling ...”）; } }
callbacks:{ onTotalScroll: function(){} }	滚动完成时调用的函数，内容一直滚动到结尾（底部/右侧）（演示）。 例： callbacks：{ onTotalScroll：function（）{ console.log（“滚动到内容结束。”）; } }
callbacks:{ onTotalScrollBack: function(){} }	滚动完成时调用的函数和内容滚动回到开头（顶部/左侧）（演示）。 例： callbacks：{ onTotalScrollBack：function（）{ console.log（“滚动回内容的开头。”）; } }
callbacks:{ onTotalScrollOffset: integer }	为onTotalScroll选项设置偏移量。 例如，设置onTotalScrollOffset: 100将在到达滚动结束之前触发100像素的onTotalScroll回调。
callbacks:{ onTotalScrollBackOffset: integer }	为onTotalScrollBack选项设置偏移量。 例如，设置onTotalScrollBackOffset: 100将在到达滚动开始之前触发100像素的onTotalScrollBack回调。
callbacks:{ alwaysTriggerOffsets: boolean }	设置调用onTotalScroll和onTotalScrollBack偏移的行为。 默认情况下，当内容在偏移内滚动时，回调偏移将重复触发。 设置alwaysTriggerOffsets: false何时需要触发onTotalScroll和onTotalScrollBack回调一次，每次都到达滚动结束或开始。
callbacks:{ onOverflowY: function(){} }	内容变得足够长并且添加垂直滚动条时调用的函数。 例： callbacks：{ onOverflowY：function（）{ console.log（“需要垂直滚动”）; } }
callbacks:{ onOverflowX: function(){} }	内容变得足够宽并且添加水平滚动条时调用的函数。 例： callbacks：{ onOverflowX：function（）{ console.log（“需要水平滚动”）; } }
callbacks:{ onOverflowYNone: function(){} }	内容变得足够短并且删除垂直滚动条时调用的函数。 例： callbacks：{ onOverflowYNone：function（）{ console.log（“不需要垂直滚动”）; } }
callbacks:{ onOverflowXNone: function(){} }	内容变得足够窄并且移除水平滚动条时调用的函数。 例： callbacks：{ onOverflowXNone：function（）{ console.log（“不需要水平滚动”）; } }
callbacks:{ onBeforeUpdate: function(){} }	在滚动条更新之前调用的函数。 例： callbacks：{ onBeforeUpdate：function（）{ console.log（“Scrollbars将更新”）; } }
callbacks:{ onUpdate: function(){} }	更新滚动条时调用的函数。 例： callbacks：{ onUpdate：function（）{ console.log（“Scrollbars updated”）; } }
callbacks:{ onImageLoad: function(){} }	每次完全加载元素内的图像并更新滚动条时调用的函数。 例： callbacks：{ onImageLoad：function（）{ console.log（“Image loaded”）; } }
callbacks:{ onSelectorChange: function(){} }	每次添加，删除元素类型或更改其大小和滚动条时调用的函数都会更新。 例： callbacks：{ onSelectorChange：function（）{ console.log（“Scrollbars updated”）; } }
live: "string"	现在和将来，在与当前选择器匹配的所有元素上启用或禁用应用滚动条。当您需要在页面中尚不存在的元素上添加滚动条时 设置live: true。这些可能是在用户执行某些操作后由其他脚本或插件添加的元素（例如，在用户单击链接之前可能不存在灯箱标记）。 如果您在任何时候需要禁用或启用实时选项，请分别设置live: "off"和"on"。 您还可以通过设置告诉脚本在第一次调用后禁用实时选项live: "once"。
liveSelector: "string"	现在和将来，设置匹配的元素集（而不是当前选择器）以添加滚动条。