滾動(dòng)條插件

最近項(xiàng)目中 老板需要 將聊天界面 的滾動(dòng)條美化一下，所以主編海百了一波，發(fā)現(xiàn)一個(gè)樣式和兼容性不錯(cuò)的滾動(dòng)條插件 jQuery自定義滾動(dòng)條樣式插件mCustomScrollbar，基本可以滿足大家的開發(fā)，官方也給出了相應(yīng)的demo;大家可以看看

此插件 需要JQ 我就不說了，

github項(xiàng)目demo地址：https://github.com/jquery/jquery-mousewheel

自己項(xiàng)目中的樣式：

這個(gè) 樣式也還不錯(cuò) ，大家可以試試，廢話不說，給大家上代碼

再使用之前 引入 相應(yīng)的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">

在所需要使用滾動(dòng)條的div 中加入id scrolldIV

<div id="scrolldIV" class="scrolldIV">

然后加入js 初始化這個(gè)滾動(dòng)條

(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);

如果需要滾動(dòng)條自動(dòng)滑下最下面 可加入

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

$(".scrolldIV").mCustomScrollbar("scrollTo","last");

是這個(gè)div 呈現(xiàn) 最后一次的會(huì)話消息

如果大家喜歡請(qǐng) 關(guān)注我，又不懂得地方可以評(píng)論！