想要实现一个自定义且主题好看的滚动条可以使用slimscroll和mCustomScrollbar、但是前者不能实现同时y轴和x轴,后者就可以,当然,插件越强大相对应的参数就多了,下面介绍一些基本使用。
基本使用
可以先下载或者先看看demo
第一步、加载mCustomScrollbar样式文件mCustomScrollbar.css
eg:
第二步、加载必须的js、有两个jquery
和jquery.mCustomScrollbar.min.js
还有mCSB_buttons.png
-
jquery
是必须的 -
jquery.mCustomScrollbar.min.js
是插件的主文件 -
mCSB_buttons.png
是插件中各种箭头的精灵图
eg:
第三步、应用mCustomScrollbar
第四步、在页面中添加内容和 mCustomScrollbar 的样式
自定义滚动条的样式,必须要出现滚动条才可以,下面给出一个小demo
滚动条的实现
The element(s) you want to add scrollbar(s) should have the typical CSS properties of an overflowed block which are a height (or max-height) value, an overflow value of auto (or hidden) and content long enough to require scrolling. For horizontal scrollbar, the element should have a width (or max-width) value set.
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
the element should have a width (or max-width) value set
显示效果:
参数配置
轴
默认情况下,出现的是垂直滚动条。要添加水平或2轴滚动条,要将轴选项设置为"x"或"yx"分别调用mCustomScrollbar函数
$(".content").mCustomScrollbar({
axis:"x" // 水平滚动条
});
$(".content").mCustomScrollbar({
axis:"yx" // 水平和垂直滚动条
});
主题
- 主题的设置可以通过html设置也可以通过Javascript设置
- 也可以通过JavaScript设置
$(".content").mCustomScrollbar({
theme:"dark"
});
参数列表
参数 | 说明 |
---|---|
setWidth: false |
设置你内容的宽度 值可以是像素或者百分比 |
set_height:false |
设置你内容的高度 值可以是像素或者百分比 |
axis: "string" |
定义内容的滚动条 值可以是 y,x,yx。其中分别为y轴滚动条,x轴滚动,x和y轴滚动条 |
scrollbarPosition: "string" |
设置滚动条相对于内容的位置。可用值:"inside","outside"。 "inside"(默认)使滚动条出现在元素内。 "outside"使滚动条出现在元素之外。请注意,将值设置为"outside"要求您的元素(或父元素)具有CSS position: relative(否则滚动条将与文档的根元素相关)。 |
autoHideScrollbar: boolean |
禁用或者启用在不使用滚动条的时候隐藏,设置为true为启用,false为禁用。注意:一些特殊的主题,例如minimal 会覆盖这个选项 |
scrollButtons:{ scrollAmount: boolean } |
scrollButtons:{enable:true}, true表示显示,false表示不显示 |
scrollButtons:{ scrollAmount: "string" } |
scrollButtons:{scrollType : "stepped"}, stepless表示按住按钮是不断滚动,stepped表示每次点击固定一定的量(可在scrollAmount设置) |
scrollButtons:{ scrollAmount: integer } |
设置滚动量以像素为单位,默认值"auto"根据可滚动内容长度调整滚动量。 |
advanced:{ autoExpandHorizontalScroll: true } |
自动扩大水平滚动条的长度 值:true,false 设置 true 你可以根据内容的动态变化自动调整大小 |
advanced:{ updateOnContentResize: boolean } |
自动根据动态变换的内容调整滚动条的大小 值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小 建议除非必要不要设置成 true 如果页面中有很多滚动条的时候 它有可能会产生额外的移出 你可以使用 update 方法来替代这个功能 |
advanced:{ updateOnImageLoad: boolean } |
每当元素中的图像完全加载时,会自动更新滚动条。 |
advanced:{ updateOnBrowserResize:Boolean } |
根据百分比为自适应布局 调整浏览器上滚动条的大小 值:true,false 设置 false 如果你的内容块已经被固定大小 |
callbacks:{onScroll: function(){}} |
自定义回调函数在滚动中执行 |
mCustomScrollbar的方法
update
用法:$(selector).mCustomScrollbar("update");
调用 mCustomScrollbar 函数的 update 方法去实时更新滚动条当内容发生变化(例如 通过 Javascript 增加或者移除一个对象、通过 ajax 插入一段新内容、隐藏或者显示一个新内容等)
$("#treeDemo").mCustomScrollbar({
// horizontalScroll:true,//横向滚动
axis:"yx",
scrollButtons:{
enable:true,//设置是否显示按钮
scrollType : "stepped" //点击按钮不松开时滚动的类型: "stepless"(按钮一直按下时,内容持续滚动)
},//箭头是否显示
theme:"3d-dark", //滚动条主题
scrollbarPosition:"inside",//滚动线的位置,在容器内部还是外部 inside(default)|outside (如果容器的position是static值,则添加position:relative)
autoDraggerLength: true,//根据内容区域自动调整滚动条拖块的长度
autoExpandScrollbar: true,
callbacks:{ onScroll:function(){
console.log("开始滚动了");
} }
});
$("#treeDemo").mCustomScrollbar("update");// 实时更新滚动条当内容发生变化
scrollTo
用法:$(selector).mCustomScrollbar("scrollTo",position,options);
你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串(例如 “#element-id”,“bottom” 等)描述或者是一个数值(像素单位)。下面的例子将会滚动到最下面的对象.
"bottom"
– 滚动到底部(垂直滚动条)
"top"
– 滚动到顶部(垂直滚动条)
"right"
– 滚动到最右边(水平滚动条)
"left"
– 滚动到最左边(水平滚动条)
"first"
– 滚动到内容区域中的第一个对象位置
"last"
– 滚动到内容区域中的最后一个对象位置
"Integer"
-滚动到内容区域中的最后一个对象位置
eg:$(".content").mCustomScrollbar("scrollTo","last");
destroy
用法:$(selector).mCustomScrollbar("stop");
调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式(当希望中断之前的scrollTo方法调用时有用)。
要禁用滚动条并重置其内容位置,请将方法的重置参数设置为true
$(selector).mCustomScrollbar("disable",true);
/* 初始化 */
$(selector).mCustomScrollbar();
/* 禁用滚动条 */
$(selector).mCustomScrollbar("disable");
/* 启用滚动条 */
$(selector).mCustomScrollbar("update");
自定义滚动条主题
- 定义主题、最简单最快的方式使用插件自带的主题
$(selector).mCustomScrollbar({
theme:"dark"
});
- 如果插件带的主题不能满足你的需求,可以自定义主题
- 创建一个新的主题
$(selector).mCustomScrollbar({
theme:"my-theme"
});
- 你的元素将获得类“mCS-my-theme”(你的主题名称带有“mCS”前缀),因此你可以使用.mCS-my-theme规则创建你的CSS 。例如:
.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; }
...