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.

cross-browser-scrollbar

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.

Select Code
1
2
<script src="angular-scroll/jquery.mCustomScrollbar.concat.min.js"></script>
    <link rel="stylesheet" type="text/css" href="angular-scroll/jquery.mCustomScrollbar.css">

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

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(function (window, angular, undefined) {
  'use strict';
  
 angular.module('YourAppName').directive('scrollDir', scrollDir);
function scrollDir() {
    return {
        link: function (scope, elem) {
            elem.mCustomScrollbar({
                theme: 'dark',
                alwaysShowScrollbar: 0,
                advanced:{
                    updateOnContentResize: true
                }
            });
        }
    };
  }
  })(window, window.angular);

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

Select Code
1
<script src="directories/scrollDir.js"></script>

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

Select Code
1
2
<div class="clearfix" scrollDir>
  </div>

I hope scroll bar tutorial will Help You!.