Scrollbars 滚动条
Scrollbars
$('#my-content').ace_scroll({size: 400});
Options
size 默认是 200px
data-size
<div id="my-content" data-size="300">
...
</div>
Horizontal 水平滚动，默认是 false
$('#my-content').ace_scroll({horizontal: true});
mouseWheel 默认 true
mouseWheelLock 默认false
lockAnyway 默认false
$('#my-content').ace_scroll({size: 300, mouseWheelLock: true});
hoverReset 默认true ，随着窗口或者其他布局的变化，滚动条大小改变
reset默认true
dragEvent默认false ，使用鼠标滚动
scrollEvent默认false 内容滚动
touchDrag默认true 触摸屏，触摸滚动
hideOnIdle 隐藏滚动条
$('#my-content').ace_scroll({
//other options
hideOnIdle: true,
hideDelay: 1500,
observeContent: true
});
Styles
styleClass选项设置样式
scroll-margin
scroll-left
scroll-top
scroll-dark
scroll-light
no-track 隐藏滚动轨迹
scroll-thin 更小
scroll-visible 显示
scroll-chrome 类似于谷歌浏览器滚动条
$('#my-content').ace_scroll({
size: 300,
styleClass: 'scroll-dark scroll-left scroll-thin'
});
Events 事件
$('#my-content').ace_scroll({
scrollEvent: true
}).on('scroll', function() {
//element scrolled
});
最好监听 原生滚动事件
$('#my-content').find('.scroll-content').on('scroll', function() {
//element scrolled
});
dragEvent
$('#my-content').ace_scroll({
dragEvents: true
}).on('drag.start', function() {
//started dragging
}).on('drag._end', function() {
//ended dragging
})
Touch Drag Event 触摸滚动事件
$('#some-element').on('ace_drag', function(event) {
//var dir = event.direction;// up down left right
//var distanceX = event.dx
//var distanceY = event.dy
})
也可以使用 Hammer.js
Functions
reset resets scrollbar size
disable disables scrollbars
enable enables scrollbars
end scroll to end
start scroll to start
update updates an option (currently only size, style and mousewheel options)
$('#my-content').ace_scroll('reset');
$('#my-content').ace_scroll('disable');
$('#my-content').ace_scroll('update', {size: 250});
$('#my-content').ace_scroll('modify', completely_new_options);
Horizontal 水平
默认从左到右
$('#my-content').ace_scroll({
horizontal: true,
size: 600,
styleClass: 'scroll-top',
mouseWheelLock: true
});
$('#my-content').ace_scroll({
horizontal: true,
//options here
}).css('padding-top', 15);
从右到左
$('#my-content').addClass('make-ltr')
.find('.scroll-content').wrapInner('<div class="make-rtl" />');
或者
<div id="my-content" class="make-ltr">
<div class="make-rtl">
...
</div>
</div>
$('#my-content').ace_scroll({
horizontal: true,
//other options here
})