AngularJS Custom scrollbar Directive Example – ngscrollbar Example

AngularJS Custom scrollbar Directive Example – ngscrollbar Example

-A custom scrollbar Directive written in pure or simple AngularJS.
-Works with the mouse drags and on touch simple responsive screen.
-Add ng-scrollbars Directive and its dependencies and config to your main index file (index.html)
-run this cmd – bower install ng-scrollbars (Directive)

Angular Scrollbar – ng-scrollbar example

include libs

This is a set of customized include scrollbars for AngularJS libs that allows we to apply simple consistent styles and css behavior all the across different all browsers like as a Mozila.

index.html

  <div>
  <div>
    {{products}}
    <ul style="height:110px;width: 40px">
      <li>
        {{product}}
      </li>
    </ul>
  </div>  
</div>

js/index.js

AngularJS directive with simple source code universal configuration or scroll individual scrollbar configuration settings.

 
var app = angular.module("liveApp", ['ngScrollbars']);

app.config(function (ScrollBarsProvider) {
    ScrollBarsProvider.defaults = {
        scrollButtons: {
            scrollAmount: 'auto', // in angularjs scroll amount simple when button pressed
            enable: true // in angularjs enable scrolling simple buttons by default
        },
        axis: 'y', // enable simple 2 axis simple scrollbars by default
       autoHideScrollbar: true,
       theme: 'light',
        advanced:{
          updateOnContentResize: true
        }
    };
});

app.controller("liveCtrl", function($scope) {
  $scope.products = ["product1", "product2", "product3", "product4", "product5","product6", "product7", "product8", "product9", "product10"];
});

We are Web Technology Experts and Team who provide you very Important information on Web Development information, Interview Questions and Answers, live project problem solution and their solution and online free tutorials – infinityknow.com”.

Example