July 8, 2018

AngularJS Custom scrollbar Directive Example – ngscrollbar Example

By admin AngularJs, Technology 0 Comments

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.

<link  href='jquery.mCustomScrollbar.css'>
<script src='jquery.min.js'></script>
<script src='angular.min.js'></script>
<script src='jquery.mCustomScrollbar.concat.min.js'></script>
<script src='scrollbars.js'></script>
<script src="js/index.js"></script>

index.html

<body>
  <div ng-app = "liveApp">
  <div  ng-controller = "liveCtrl">
    {{products}}
    <ul ng-scrollbars style="height:110px; width: 40px;">
      <li ng-repeat = "product in products">
        {{product}}
      </li>
    </ul>
  </div>  
</div>
</body>

js/index.js

READ : Angular interview questions for freshers

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”.

READ : Vuejs Input multiple Tags with dynamic autocomplete using Tag Manager

Example

Post Views: 867