首页 > 代码库 > mCustomScrollbar插件自定义滚动条

mCustomScrollbar插件自定义滚动条

系统自定义 的滚动条是超级丑的有木有,为了网站的风格统一,需要有自定义的滚动下拉条,自己封装函数又累又难,今天给大家一款炒鸡好用的自定义下拉条插件~(百度云有完整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 代码加载方法如下:

mCustomScrollbar插件自定义滚动条