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.

READ :  Laravel JQuery AJAX Pagination Step By step

[php]

[/php]

index.html
[php]

{{products}}

  • {{product}}

[/php]

js/index.js

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

[php]
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”];
});
[/php]

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 :  AngularJs Round to 2 decimal places

Example

Leave a Reply

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