mCustomScrollbar插件自定义滚动条

Posted 2020-08-07 HelloPengHR！

系统自定义 的滚动条是超级丑的有木有，为了网站的风格统一，需要有自定义的滚动下拉条，自己封装函数又累又难，今天给大家一款炒鸡好用的自定义下拉条插件~（百度云有完整demo，可以下载下来参考）

demo在百度云：http://pan.baidu.com/s/1nutdP9J

 

可以先看一下这个插件可以选择的样式，http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html

 

 

1.如何使用mCustomScrollbar

a：加载 mCustomScrollbar 的样式文件。

通过下面的代码，引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。

b：加载必须的 JS 文件。

必要的js文件（我的demo包里有）

• 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 代码加载方法如下：