Angular Scrollable

Minimal wrapper around the perfect-scrollbar jQuery plugin. Requires jQuery (obv) and also includes jquery-mousewheel as a bower dependency for convenience.

Getting started

Include the perfect scrollbar-stylesheet in your page head:

    <link rel="stylesheet" href="perfect-scrollbar/src/perfect-scrollbar.css">

Include the jquery-mousewheel, perfect-scrollbar, and angular-scrollable scripts at the end of your page body (after the jQuery and angular scripts).

    <script src="perfect-scrollbar/src/perfect-scrollbar.js" type="text/javascript" charset="utf-8"></script>
    <script src="scrollable.js" type="text/javascript" charset="utf-8"></script>

Add the 'scrollable' module as a dependency to your app:

angular.module('myApp', ['scrollable']);

Finally use the 'scrollable' directive in your view!

<div scrollable style="height:300px">
  <!-- Too much content for 300px to handle! -->
</div>

You can also make use of any of the perfect scrollbar initialize params by assigning a object to the 'scrollable' attribute.

<div scrollable="{useKeyboard: false}" style="height:300px">
  <!-- Also, no keyboard for you! -->
</div>

Examples

Examples are run with the 'grunt server' task and will live reload as you edit files in the examples directory (or any of the source files).

You will need to have the grunt-cli module installed globally. Run bower install && npm install to download needed dependencies.

Changelog

• 2014-01-17 v0.2.3 Scroll to top when container height changes.
• 2013-12-30 v0.1.0 Initial commit.

License

MIT