Friday, August 29, 2014

AngularJS custom scrollbar directive

On a recent project I needed to create a widget that had a similar look and feel across multiple platforms. This widget had a limited size and needed scrolling. When developing on my Macbook the scrollbars were working fine and everything seemed ok. As soon as we started testing it in Windows, the scrollbar width caused an issue with the rendering pushing all the content down.

The solution that we decided on was to use a custom scrollbar. After scouring the web for custom scrollbars in JavaScript I found TinyScrollbar. I liked it because it didn't use jQuery as we were using AngularJS and didn't want to bog down our app with jQuery. I decided to tweak it and port it to AngularJS as a directive.

It's available on github and via bower (bower install ng-tiny-scrollbar) and a demo can be seen here.

4 comments:

  1. Angularjs Online Training Angularjs Training Angularjs Training Angularjs Training in Chennai Angularjs Training in Chennai Angularjs Course Angularjs Course Angular 2 Training in Chennai

    ReplyDelete
  2. I Visited lot of blogs and Web sites But in this AngularJS Blog Information is Very usefulthanks for sharing it........

    ReplyDelete
  3. I too faced the same thing reading your content I got the same in effective of the similar project As I being a PMP Certified person I completed my PMP Certification in Chennai with effective of holding certain Projects Well I have done several Projects in AngularJS Well Thank you for sharing your experience with the Project

    ReplyDelete
  4. Hi, thank you for sharing the details of your Project Well i too face similar problems in PMP Projects I got my PMP Training in Mumbai At that training time I was having certain issues in the project references but we can slove them using some plugins and some coding Please keep updating the issues you faced so that It will be easy for evaluating the Issues

    ReplyDelete