jQuery中内容滚动器插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zlq_CSDN/article/details/88861570

大家可能发现，在我们写的默认的文章内容中出现的滚动条样式很难看，而我们在浏览一下网站时，见到很多不同样式的滚动条，其实他们就是采用我们 jQuery 框架中插件来做的。
当然啦，我们也可以自己去实现，但是会比较麻烦，比如兼容性的处理。

jQuery内容滚动器（jQuery custom content scroller）使用方法如下：

1. 首先我们需要登录网站进行相关文件的下载
   http://manos.malihu.gr/jquery-custom-content-scroller/#expand-info
   下载文件中包含了滚动条样式所需的 js 、css 文件。
   
2. 将对应的 jquery.mCustomScrollbar.css 文件引入到 html 文件中。

	<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />

注意：我们需要先导入其他框架的 css 文件，然后在导入自己的 css 文件，因为在我们自己的 css 文件中有可能会去操作其他插件或框架中的 css 文件。

3. 将 jquery.mCustomScrollbar.concat.min.js 文件引入到 html 文件中。

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

注意：插件 js 文件是基于、依赖于jQuery框架来实现的，我们自己的 js 文件有可能会去操作插件的 js 文件，因此再引入插件的js文件前，必须先将 jQuery 框架引入。

4. 接下来该在 js文件中操作了
   需要在入口函数中声明是给哪块内容添加的滚动条修饰。

	<script>
	    (function($){
	        $(window).on("load",function(){
	        	//自定义滚动条
	            $(".content").mCustomScrollbar();  //表示给类名为content的内容添加滚动条修饰
	        });
	    })(jQuery);
	</script>

5. 然后就是在 html 文件中对应的内容标签中操作，添加如下语句：

   data-mcs-theme=“dark”
   注意：我们可以通过改变该属性的值来切换对应滚动条的样式
   属性值参见：http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html

	<div class="mCustomScrollbar" data-mcs-theme="dark">
	  <!-- your content -->
	</div>

6. 最后我们可以根据自己的需求对滚动条进行修改

	._mCS_1 .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
	
	._mCS_2 .mCSB_dragger .mCSB_dragger_bar{ background-color: green; }
	
	#mCSB_3_dragger_vertical .mCSB_dragger_bar{ background-color: blue; }
	
	#mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; }
	
	#mCSB_1_scrollbar_horizontal .mCSB_dragger{ width: 100px; }
	
	.mCSB_1_scrollbar .mCSB_dragger .mCSB_draggerRail{ width: 4px; }