首页 > 代码库 > mCustomScrollbar插件自定义滚动条
mCustomScrollbar插件自定义滚动条
系统自定义 的滚动条是超级丑的有木有，为了网站的风格统一，需要有自定义的滚动下拉条，自己封装函数又累又难，今天给大家一款炒鸡好用的自定义下拉条插件~（百度云有完整demo，可以下载下来参考
）
a：加载 mCustomScrollbar 的样式文件。
通过下面的代码，引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。
b：加载必须的 JS 文件。
）- jquery.mCustomScrollbar.js
- jquery.mousewheel.min.js
- jquery.mCustomScrollbar.css
- mCSB_buttons.png（要是不喜欢用css写出来的样式，可以插这个图片，个人认为css的够用了，看个人需要）
注意：加载顺序也要按照上面代码的顺序，如果不注意加载的顺序，可能会导致失败，
可以把这段代码放在文档的底部来缩短加载网页内容的时间。这里使用了 Google 的 CDN 加速服务来加载 jQuery 和 jQuery UI，当然你也可以把这两个库上传到自己的服务器上。另外注意下 jQuery UI 这个插件被作者精简了，只包含这个插件必须的模块，大小也只有 43KB。
如果当你在使用类似 Google 或者 Sina 的常用 Javascript 库的加速服务的话，更推荐采用下面的这种 fallback 的写法，如果 CDN 的 JavaScript 代码没有加载成功，就会引用本地的库，而不会导致插件无法使用：
2：在页面中添加内容和 mCustomScrollbar 的样式
没有内容当然谈不上出现这个插件的效果了。就上述示例代码来说，我们应该在页面中定义一个 class 为 content 的 内容块。并添加一些测试数据：
测试数据.......还有很多很多
这样当然不算完，自定义滚动条的样式，必须要出现滚动条才可以，所以我们还要对这个块加上一些 CSS 来让它出现滚动条，否则是没有效果的。加上的样式很简单，就是定义一个宽或者高或者宽高都定义，然后再定义一个 overflow 值为 auto。这样如果内容超出了指定的宽高，就会出现一个滚动条。例：
css除了引入mCustomScrollbar.min.css，还需要自己写出现下拉条区域的样式.demo-box{ display: block; width: 200px; height: 300px; background: #bbb; border: 1px solid #ddd; margin:100px auto; padding:10px; overflow: hidden;}
3：应用 mCustomScrollbar
这里我使用了(function($){ … })(jQuery)；来包裹 jQuery 代码，这是为了避免冲突。我还用了window load ($(window).load()) 来激活我的插件功能，因为这样，就可以保证在页面对象全部加载完成之后，加载我的插件。当然，你也可以使用常规的 jQuery 代码加载方法，但是你要明白 ready 和 load 方法之间的不同。一般的 jQuery 代码加载方法如下：
mCustomScrollbar插件自定义滚动条