滚动条插件
最近项目中 老板需要 将聊天界面 的滚动条美化一下,所以主编海百了一波,发现一个样式和兼容性不错的滚动条插件 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 呈现 最后一次的会话消息
如果大家喜欢请 关注我,又不懂得地方可以评论!