1. Scrollbars
2. Options
-
size which is 200px by default
$('#my-content').ace_scroll({size: 400});
You can also specify size using data-size attribute:
...
-
horizontal default=false. If true, horizontal scrollbars will be added
$('#my-content').ace_scroll({horizontal: true});
mouseWheel default=true. Scrolls content on mouse wheel event. When end of content is reached, mouse wheel event will be propagated to window
-
mouseWheelLock default=false. If true and we have reached end of scrolling on our element, mouse wheel event won't be propagated to window
lockAnyway default=false. If true, even if scrollbars are not needed and are not visible yet, mouse wheel event won't be propagated to window
$('#my-content').ace_scroll({size: 300, mouseWheelLock: true});
styleClass additional style classes you can add to scrollbars. See next section for more info.
-
hoverReset default=true, because of window size changes and other document layout changes,
content sizes may change and we may need to reset scrollbar size.
It can be done on mouseenter event, which is set to true by default.
-
reset default=false. If true, content will be scrolled to 0, on initialization.
Does not work when the element is hidden at first.
-
dragEvent default=false. If true an event will be triggered when
user starts dragging scrollbars using mouse.
-
scrollEvent default=false. If true an event will be triggered when
content is scrolled.
-
touchDrag default=true, which adds touch drag event for touch devices.
-
hideOnIdle will hide scrollbars when user is not scrolling content
You may also want to use hideDelay which specifies time before hiding scrollbars
and also observeContent which specifies whether content and scrollbar size
should be reset before making it visible:
$('#my-content').ace_scroll({
//other options
hideOnIdle: true,
hideDelay: 1500,
observeContent: true
});
3. Styles
4. Events
-
If you set
scrollEvent to true, a scroll event will be triggered when element is scrolled:
$('#my-content')
.ace_scroll({
scrollEvent: true
})
.on('scroll', function() {
//element scrolled
});
But it's better to listen to the inner content's native scroll event:
$('#my-content').find('.scroll-content').on('scroll', function() {
//element scrolled
});
-
If you set
dragEvent to true, some drag events will be triggered when scrollbars are dragged:
$('#my-content')
.ace_scroll({
dragEvents: true
})
.on('drag.start', function() {
//started dragging
})
.on('drag._end', function() {
//ended dragging
})
5. Touch Drag Event
6. Functions
7. Horizontal
-
Horizontal scrollbars can be created by specifying
horizontal option:
$('#my-content').ace_scroll({
horizontal: true,
size: 600,
styleClass: 'scroll-top',
mouseWheelLock: true
});
-
Sometimes you may need to add some padding to the element if scrollbars appear above content:
$('#my-content').ace_scroll({
horizontal: true,
//options here
}).css('padding-top', 15);
-
If you are using RTL (right to left) direction,
please note that horizontal scrolling is inconsistent between browsers.
So it's better to change scrollbars to LTR and make the content RTL again.
You can use .make-ltr and .make-rtl classes:
$('#my-content').addClass('make-ltr')
.find('.scroll-content').wrapInner('<div class="make-rtl" />');
Or statically inside your HTML:
$('#my-content').ace_scroll({
horizontal: true,
//other options here
})
8. Sidebar Scrollbars
-
You can also use scrollbar for sidebar whether it's fixed or not.
-
I have used two approaches for sidebar
-
The first one which is used by default, does not use
overflow:hidden and
can be used only on fixed sidebar.
The advantage is that .hover submenus or mininized sidebar can also have scrollbars and
submenus will be shown outside of sidebar area without problem.
Second one uses real scrollbars and has overflow:hidden applied to it.
It can be used on both normal and fixed sidebar.
To enable it you should build a custom JS using 2nd sidebar scrollbar style.
-
Each one has several options which you can edit inside:
assets/js/ace/ace.js
assets/js/ace.js
dist/js/ace.min.js
Look for sidebar_scrollable and change options as needed.
-
Options for first style (fixed sidebar only):
scroll_to_active If true, sidebar will be scrolled down to show active menu item on page load
include_shortcuts If true, shortcuts will also be inside scroll area. Otherwise it will be above scroll area
include_toggle If true, sidebar toggle(minimize button) will also be inside scroll area. Otherwise it will be below scroll area
smooth_scroll If true, sidebar scrolling will be smooth using CSS3 transition
outside If true, scrollbar will be outside of scroll area
-
Options for secod style (normal/fixed sidebar):
only_fixed If true, scrollbars will be enabled for fixed sidebar only
scroll_to_active If true, sidebar will be scrolled down to show active menu item on page load
include_shortcuts If true, shortcuts will also be inside scroll area. Otherwise it will be above scroll area
include_toggle If true, sidebar toggle(minimize button) will also be inside scroll area. Otherwise it will be below scroll area