Implementing custom scrollbar

Question

I am quite new in Angular world. I am working on an application which involves Angular JS. I've been confronted with the requirement to implement custom scrollbar. My application does have jQuery too, but so far most part of my project uses Angular. So should I be using some jQuery widget or implement it via Angular.

If Angular, can you provide me pointers on how should I proceed?

Answer 1

You should probably implement it in the Angular way, i.e., building / using a custom Angular's directive:

http://docs.angularjs.org/guide/directive

Learning resources for Angular:

https://github.com/jmcunningham/AngularJS-Learning

You can always use jQuery plugins / widgets in an Angular app, but in that case the best way is to encapsulate each plugin within a directive. Angular-UI is a project which does that for several components, including Twitter Bootstrap:

http://angular-ui.github.io/

I'm aware of angular-perfect-scrollbar, a simple Angular's directive for perfect-scrollbar, but haven't tested it yet:

https://github.com/itsdrewmiller/angular-perfect-scrollbar

http://www.yuiazu.net/perfect-scrollbar/

Answer 2

Depending on what your requirements are, you can style your scrollbars strictly in CSS and not need any JavaScript:

http://css-tricks.com/custom-scrollbars-in-webkit/