Aurelia + mCustomScrollbar — How To

This is a short write-up that goes over how to install mCustomScrollbar (http://manos.malihu.gr/jquery-custom-content-scroller/).

First off, make sure that you have jQuery install via JSPM.

Then, install mCustomScrollbar:

jspm install mCustomScrollbar=npm:malihu-custom-scrollbar-plugin

Instead of going the JS route and messing with custom attributes (really the only way to make it work with Aurelia if you are using compose to dynamically render your views), it is much less of a pain to just work with adding the mCustomScrollbar CSS class to the content blocks that you want to use it on.

Make ABSOLUTELY sure that your div container has two important CSS properties:

overflow: auto; // can do hidden as well
height: XXXpx; // whatever you want the height of the container to be prior to scrolling.

Speaking as someone that tried to do it with Aurelia/JS, it is much easier to just do it with CSS.

Hope this saves someone some time!

Show your support

Clapping shows how much you appreciated Shane Jeffery’s story.