滚动条插件

滚动条插件

最近项目中 老板需要 将聊天界面 的滚动条美化一下，所以主编海百了一波，发现一个样式和兼容性不错的滚动条插件 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 呈现 最后一次的会话消息

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