美化滚动条插件
2017-08-24 00:24
246 查看
最近项目中 老板需要 将聊天界面 的滚动条美化一下,所以主编海百了一波,发现一个样式和兼容性不错的滚动条插件 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 呈现 最后一次的会话消息
如果大家喜欢请 关注我,又不懂得地方可以评论!>
相关文章推荐
- jquery美化滚动条插件jscrollpane应用
- jQuery高性能自定义滚动条美化插件
- jQuery高性能自定义滚动条美化插件
- 美化滚动条插件mCustomScrollbar.js的使用示例
- 滚动条美化jquery插件nicescroll的使用
- 滚动条美化jquery插件nicescroll的使用
- jQuery滚动条美化插件nicescroll简单用法示例
- 滚动条美化,两款优秀的模拟滚动条插件
- jQuery iScroll.js 移动端滚动条美化插件第1/5页
- jQuery iScroll.js 移动端滚动条美化插件第1/5页
- jquery美化滚动条插件jscrollpane应用(转)
- [jQueryUI] - Chosen:select下拉选择框美化插件及问题
- jquery photoFrame 图片边框美化显示插件
- Bootstrap复选框和单选按钮美化插件(推荐)
- 推荐几款很棒的 JavaScript 表单美化和验证插件
- jquery插件,美化select标签
- cnblogs美化及插件
- jQuery扁平化风格下拉框美化插件FancySelect使用指南
- 用CSS美化你的滚动条
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法