Ace Admin Docs
🔍
‹ ›

Scrollbars

In Ace's demo only native browser scrollbars are used. However you can also use a plugin, for example SimpleBar is a good one.

If an element has data-ace-scroll attribute, scrollbars are added to it on page load:

html 
<div class="mydiv" data-ace-scroll>
 ...
</div>

Options

The following options can be passed to ace-scroll attribute or to aceScroll function:

type

Can have one of the following values:

  • native : is the default value and adds native scrollbars to the element
  • auto : preferrably adds native scrollbars in modern browsers and if not available uses a plugin (if the plugins is available and included)
  • plugin : adds plugin scrollbars (if the plugins is available and included)

smooth

If true will make the scrollbars fade in/out on mouse hover in most modern desktop browsers (except Edge)

height

Optionally sets the max-height of the element to enable scrollbars

lock

Is false by default so when an element reaches end of scrolling, body element will start scrolling. Setting to true disables it (older browsers don't support this)

color

Currently grey is available for grey scrollbars

autohide

Default is true. If set to false scrollbar will always be visible

ignore

Can be mobile or desktop and will not add scrollbars on that device.
Navbar messages menu for example, doesn't have scrollbars in mobile devices.

plugin

Is the name of the plugin you want to use. Default is SimpleBar. However you may want to directly call the plugin's constructor itself rather than through aceScroll

options

Will be passed to the plugin

html 
<div class="mydiv" ace-scroll='{"smooth": true, "height": 300}'>
 ...
</div>

or later throught Javascript

js 
$('#mydiv').aceScroll({
    height: 300,
    smooth: true,
    lock: true
});

When smooth is true, scrollbar tracks become transparent but native browser scrollbars still hide the content beneath and clip them.
So you may need to add some padding to the element's children so they are fully visible:

html 
<div class="mydiv" ace-scroll='{"smooth": true, "height": 300}'>
 <div class="px-2">
    My Content
 </div>
</div>

For sidebar I recommend only sticking to native browser scrollbars for better performance specially on mobile devices. Please see Sidebar scrollbars

Styling

You can set color option to grey for grey scrollbars instead of blue.

Also you can change scrollbar colors of an element to match Ace's by adding .ace-scrollbar class to it, without invoking any functions, etc...

And to change the colors of scrollbars, modify $scrollbar-thumb and $scrollbar-track in _variables.scss

Dark sidebars have different scrollbar colors, and you can change that in _sidebar-themes-variables.css by modifying scrollbar-thumb and scrollbar-track values for a specific sidebar theme

Settings Modals & Asides
↑