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