原文地址：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"
 现在和将来，设置匹配的元素集（而不是当前选择器）以添加滚动条。

自定义滚动条文档（mCustomScrollbar使用文档）相关推荐

  1. 洗礼灵魂，修炼python（21）--自定义函数（2）—函数文档，doctest模块，形参，实参，默认参数，关键字参数，收集参数，位置参数...

    函数文档 1.什么是函数文档: 就是放在函数体之前的一段说明,其本身是一段字符串,一个完整的函数需要带有函数文档,这样利于他人阅读,方便理解此函数的作用,能做什么运算 2.怎么查看函数文档: func ...

  2. 智能文档理解:通用文档预训练模型

    预训练模型到底是什么,它是如何被应用在产品里,未来又有哪些机会和挑战? 预训练模型把迁移学习很好地用起来了,让我们感到眼前一亮.这和小孩子读书一样,一开始语文.数学.化学都学,读书.网上游戏等,在脑子 ...

  3. 干掉 Postman？测试接口直接生成API文档，这个文档工具真香！

    欢迎关注方志朋的博客,回复"666"获面试宝典 实不相瞒我的收藏夹里躺着很多优质的开源项目,我有个爱好平时遇到感兴趣的开源项目都会记录下来,然后有时间在慢慢研究.前几天刚给同事分享 ...

  4. 实施文档_Word 2010文档处理案例教程

    Word 2010文档处理案例教程 ISBN:978-7-80243-928-3/02 作者:黄桂林 江义火 郭燕 定价:38.00元 出版社:航空工业出版社 适用层次:通用 出版日期:2019-10 ...

  5. html在分页功能中如何实现当前页面的页码样式与其他页面不同_如何使用word文档？word文档使用技巧教程？...

    Word文档使用方法与教程: 使用正确的部分和章节标题 我们在前面的章节中介绍了预设样式,但是这些样式可用于快速创建章节,子标题和标题页.在"主页"功能区选项卡中找到样式,可以在其 ...

  6. Facebook 游戏开发更新文档 API 参考文档 v6.0

    Facebook 游戏开发更新文档 API 参考文档 v6.0 更新日志 1.排行榜 此版本全新推出排行榜 API!提供一套强大的 API, 使得游戏可获取排行榜.查询得分 情况和设置新分数(支持分数 ...

  7. 计算机文档我的文档丢失,“我的文档”不见了如何找回？几种解决“我的文档不见了”的办法...

    大家打开"我的电脑"或在桌面上和开始菜单上都可以看得到"我的文档",使用也都正常,但在"我的电脑"里面只有"共享文档"时 ...

  8. 微软 文档转换服务器,文档转换器

    文档转换器 11/16/2014 本文内容 适用于: SharePoint 2016 |SharePoint Foundation 2013 |SharePoint Online |SharePoin ...

  9. Word的样式库在 选项卡中_如何使用word文档？word文档使用技巧教程？

    Word文档使用方法与教程: 使用正确的部分和章节标题 我们在前面的章节中介绍了预设样式,但是这些样式可用于快速创建章节,子标题和标题页.在"主页"功能区选项卡中找到样式,可以在其 ...

  10. 如何利用 nbconvert将 IPYNB文档转换 Markdown文档？

    简 介: IPYNB文件是现在基于IPython开发工程人员记录和分析处理算法和数据记录文档.将该文档转换成其它格式可以方便面进行思想共享,工作汇报等.利用 nbconvert可以很方便将ipynb的 ...

最新文章

  1. 删除数据 DataIntegrityViolationException: not-null property references a null or transient value解决...
  2. 使用 kolla-ansible 来 reconfigure OpenStack 集群
  3. 机器学习算法进阶——决策树和随机森林
  4. html中文段落,HTML 段落-JavaScript中文网-JavaScript教程资源分享门户
  5. Java秘技之Json数据解析与转换 -- Java使用示例
  6. python 线程退出_python线程退出
  7. 企业实战_13_MyCat清除冗余数据
  8. MultiResolution研究
  9. SAP License：这种ERP系统核查工作实际是在做无用功
  10. C++---基于ffmpeg实现视频播放器（一）
  11. C# string byte[] Base64 常用互相转换
  12. JVM初识-JVM内存结构
  13. python 人脸识别活体检测_人脸识别 -- 活体检测(张嘴摇头识别)
  14. mysqlfrm 解析mysql frm文件 彻底解决phpmyadmin 管理表 “使用中”问题
  15. 安装 smartgit
  16. 浙大pythonpta作业答案_浙大PTA-Python题库 编程题第一章(1-1~1-3)题解
  17. 怎样才能胜任技术总监
  18. 深夜一个考研女生：“我焦虑症犯了”
  19. linux系统命令make.clean的用法讲解
  20. mysql导入sas文件夹_SAS建立本地文件夹

热门文章

  1. 大学英语精读第三版（第四册）复习笔记——文章内容摘要
  2. 计算机对未来和生活,计算机的发展对人类生活的影响
  3. 修改egret引擎源码
  4. 产品读书《终结拖延症》
  5. 一切成功源于积累——20140928 认识货币——加元
  6. 【源码阅读 | 03】only-allow 统一规范团队包管理器
  7. Spring boot项目启动报无法加载主类
  8. 戴钊《自我教练：迈向自我实现之路》读书笔记
  9. 安徽省太和一中2021高考成绩查询分数,安徽省太和一中
  10. Chrome下面查看placeholder的样式