Scroll Bar with Dynamic Data Using Angular Directive

Scroll bar is very useful to any modern website and blog, sometimes we need to set scroll on div which hold a lot of dynamic data.I had research and found that a lot of jquery scroll plugin which can be use for scroll content with awesome scroll bar UI but with dynamic data its failed.

Dynamic data means, you are filling your content div using ajax data or partially change based on request.I am searching a cross browser scroll which can apply on tree view menu but i did not found that any jquery/angular scroll plugin which fits over requirement.They worked fine if data is static but if data is dynamic they do not work properly.


Finally, I found jQuery malihu custom content scroller plugin,Thanks malihu for creating wonderful and most customizable scroll bar.

You can also check other tutorial of scrollBar plugin,

Custom content scroller plugin work on all major browsers including IE 10, 9, 8 & 7 and on iOS and Android devices.The main features are vertical and horizontal scroll, mouse-wheel,set width of wheel and themes etc.

Since here i am creating angular directive to create scroll bar directive and use it on target container.You know angular is very popular front end framework.

There are following steps need to follow to create Scroll Bar

Step 1: Download jQuery malihu custom content scroller plugin.

Step 2: Include css and js file into Your index.html file.

Step 3: Create Directory and put below code into 'scrollDir.js' file into your application.

Step 3: include above 'scrollDir.js' file into your application.

Step 4: Include ‘scrollDir’ into your target div or container which you want scroll bar.

I hope scroll bar tutorial will Help You!.

Leave a Reply

Your email address will not be published. Required fields are marked *