Angularjs Directive Scrollbar
Hi guys, I am not a CSS person. I am not sure if there is a way to add a vertical scroll bar for a height that would dynamically change. With css if you want to add a vertical scroll bar you can do as following.
div { height: 150px; overflow: scroll; /*OR auto*/ }
But, what if you don’t know the height of your content or the window? That’s when the javascript comes in. I decided to create a directive that will listen to window’s resize event. When the event is fired, it would dynamically set the height’s value. Below directive does that.
.directive('scroll', function ($window) { return { restrict: 'A', link: function(scope, elem, attrs) { scope.onResize = function() { var scrollHeight = $window.innerHeight - elem[0].getBoundingClientRect().top;; elem.css({'height':scrollHeight}); } scope.onResize(); angular.element($window).bind('resize', function() { scope.onResize(); }) } } });
To add a scrollbar throw in the “scroll” attribute to your div.
...