欢迎大家来到IT世界,在知识的湖畔探索吧!

如何使用 mCustomScrollbar

• jquery.mCustomScrollbar.js
• jquery.mCustomScrollbar.css

第一步：加载 mCustomScrollbar 的样式文件。

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

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

欢迎大家来到IT世界,在知识的湖畔探索吧!

第二步：加载必须的 JS 文件。

需要加载的文件有如下几个：jQuery和 jquery.mCustomScrollbar.js 这两个。

jQuery是必须的，jquery.mCustomScrollbar.js 则是插件的主文件。

第三步：应用 mCustomScrollbar

1. <script type=’text/javascript’>
2. (function($){
3. $(document).ready(function(){
4. $(“.content”).mCustomScrollbar();
5. });
6. })(jQuery);
7. </script>

第四步：在页面中添加内容和 mCustomScrollbar 的样式

没有内容当然谈不上出现这个插件的效果了。就上述示例代码来说，我们应该在页面中定义一个 class 为 content 的 内容块。并添加一些测试数据：

<div class=”content “>

<p>测试数据…….还有很多很多</p>

</div>

这样当然不算完，自定义滚动条的样式，必须要出现滚动条才可以，所以我们还要对这个块加上一些 CSS 来让它出现滚动条，否则是没有效果的。加上的样式很简单，就是定义一个宽或者高或者宽高都定义，然后再定义一个 overflow 值为 auto。这样如果内容超出了指定的宽高，就会出现一个滚动条。