Highly customizable custom scrollbar plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more.
For all option see the documentation

Initialize via HTML

Add the class mCustomScrollbar to any element you want to add custom scrollbar(s) with default settings.
Use data attribute data-mcs-axis=" x " to place the place the scrollbar horizontal.
With attribute data-mcs-theme=" " you can set a style.
e.g. data-mcs-theme="dark"

Scrollable content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Content height

Initialize via javascript and use option setHeight: to set the height of the scrollable content.

$('element').mCustomScrollbar({
  setHeight: 200
});
Scrollable content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Horizontal

JS settings:

axis:"x",
setHeight: 120,
theme:"dark-thin",
autoExpandScrollbar:true,
advanced:{autoExpandHorizontalScroll:true}

Horizontal scrolling

Auto hide

Initialize via javascript and use option autoHideScrollbar: to hide the scrollbar when scrolling is idle and/or cursor is out of the scrolling area.
For all the options see the documentation

Hide scroller

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, vitae, facere accusantium reiciendis laudantium itaque id eligendi quasi numquam veritatis explicabo nulla eum aspernatur provident perspiciatis rerum saepe repellendus atque.

© 2016 YourApp