Perfect scrollbar

Minimalistic but perfect custom scrollbar plugin

GitHub Perfect scrollbar

Usage

<div class="scrollbar-example">
  <div class="content"></div>
</div>
$('.container').perfectScrollbar();

Before using perfect-scrollbar

The following requirements should meet.

  • the container must have a ‘position’ css style.
  • the container must be a normal container element.
    • PS may not work well in body, textarea, iframe or flexbox.

The following requirements are included in the basic CSS, but please keep in mind when you’d like to change the CSS files.

  • the container must have an ‘overflow: hidden’ css style.
  • the scrollbar’s position must be ‘absolute’.
  • the scrollbar-x must have a ‘bottom’ css style, and the scrollbar-y must have a ‘right’ css style.

Please keep in mind that perfect-scrollbar won’t completely emulate native scrolls. Scroll hooking is generally considered as bad practice, and perfect-scrollbar should be used with care. Unless custom scroll is really needed, please consider using native scrolls.