AngularJS Nanoscroller

by Zaiste

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.7.2/jquery.nanoscroller.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.7.2/nanoscroller.css">
<body ng-app="app" > 

    <div class="nano" nano="{alwaysVisible: true, sliderMaxHeight: 40}">
     <div class="content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec nisi in neque tempus volutpat. Maecenas pretium commodo eros nec volutpat. Proin auctor ultricies lacus, ac aliquet tortor condimentum non. Cras venenatis pharetra eleifend. Nam tortor mauris
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec nisi in neque tempus volutpat. Maecenas pretium commodo eros nec volutpat. Proin auctor ultricies lacus, ac aliquet tortor condimentum non. Cras venenatis pharetra eleifend. Nam tortor mauris
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec nisi in neque tempus volutpat. Maecenas pretium commodo eros nec volutpat. Proin auctor ultricies lacus, ac aliquet tortor condimentum non. Cras venenatis pharetra eleifend. Nam tortor mauris
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec nisi in neque tempus volutpat. Maecenas pretium commodo eros nec volutpat. Proin auctor ultricies lacus, ac aliquet tortor condimentum non. Cras venenatis pharetra eleifend. Nam tortor mauris
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec nisi in neque tempus volutpat. Maecenas pretium commodo eros nec volutpat. Proin auctor ultricies lacus, ac aliquet tortor condimentum non. Cras venenatis pharetra eleifend. Nam tortor mauris

        </div> 
    </div>
</body>

CSS

.nano { background: #EDEDED; width: 300px; height: 300px; }
.nano .content { padding: 10px; }
.nano .pane   { background: #02adea; }
.nano .slider { background: #111; }

JavaScript

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

app.directive('nano', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).nanoScroller(scope.$eval(attrs.nano));
        }
    };
});