最近在输出项目中，有页面对滚动条样式进行了设计。之前考虑到兼容性问题很少用到自定义滚动条样式的。而如今使用默认的滚动条样式显然已经不适合大众审美观了。为了能够实现这一效果，找到了一个jQuery插件感觉挺好用的，今天进简单介绍下 mCustomScrollbar插件。

官网地址：
   点击这里可以下载相关案例：

如何使用 mCustomScrollbar

第一步、首先，先请你下载作者提供的插件包，里面包含了所有的插件文件和一些例子。其中我们需要的文件有：jquery.mousewheel.min.js  query.mCustomScrollbar.js  
jquery.mCustomScrollbar.css 。

第二步、加载插件的样式文件以及所需要的js文件。
引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。在css样式表中，可以根据我们的效果图来定义滚动条。加载必须的 JS 文件。 jquery.mousewheel.min.js 是用来提供滚动支持的，jquery.mCustomScrollbar.js 则是插件的主文件。

第三步、对 内容块 激活这个插件

第四步、对页面中需要使用滚动条的内部区域进行样式定义。

1.  .content {height: 530px;  overflow: hidden;}

自定义滚动条样式，当内容高度超过时，才会出现滚动条。完成上述操作之后，基本上就能出现自定义的滚动条了。滚动条样式根据自己需要在jquery.mCustomScrollbar.css进行调整。

根据这个插件输出好的页面

转载 jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法