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.

	
 ... 

Momin