美化滚动条插件

 
最近项目中 老板需要 将聊天界面 的滚动条美化一下，所以主编海百了一波，发现一个样式和兼容性不错的滚动条插件 jQuery自定义滚动条样式插件mCustomScrollbar，基本可以满足大家的开发，官方也给除了相应的demo;大家可以看看


此插件 需要继JQ 我就不说了，


github项目demo地址：https://github.com/jquery/jquery-mousewheel


自己项目中的样式：








这个 样式也还不错 ，大家可以试试，废话不说，给大家上代码


再使用之前 引入 相应的css js；


<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/linkCss/jquery.mCustomScrollbar.css">
<script src="${pageContext.request.contextPath}/lib/linkJs/jquery.mCustomScrollbar.concat.min.js">
在所需要使用滚动条的div 中加入id scrolldIV
<div id="scrolldIV" class="scrolldIV">
然后加入js 初始化这个滚动条


(function($){


$(window).on("load",function(){


$.mCustomScrollbar.defaults.theme="inset"; //set "inset" as the default theme


$.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default


$(".scrolldIV").mCustomScrollbar();


});


})(jQuery);
如果需要滚动条自动滑下最下面 可加入


$(".scrolldIV").mCustomScrollbar();


$(".scrolldIV").mCustomScrollbar("scrollTo","last");
是这个div 呈现 最后一次的会话消息






如果大家喜欢请 关注我，又不懂得地方可以评论！>