derby-ui-fancyscroll

A fancy scrollbar component library for Derby.

Intended for a simple (but fancy?) tiny scrollbar that fades when not in use. This uses the native scrolling mechanisms with event listeners to update the scrollbar. Other libraries already have such scrollbar plugins available. For example, jsFancyScroll for jquery (from which the ideas, css, and bits of code were borrowed for this component).

Installing

Include as a node_module and add it to the required modules in your app/index.{js,coffee} like I'm doing here...

app = require('derby').createApp(module)
  .use(require 'derby-ui-boot')
  .use(require 'derby-ui-fancyscroll')
  .use(require '../../ui/index.coffee')

Usage

Wrap the content you want to be in a scrolling div like so

<fancy:scroll scrolly="true|false" scrollx="true|false" height="???px" width="???px">
  content...
</fancy:scroll>

The code expects at least one of scrolly or scrollx to be true. Also, if a scrollbar is not wanted, set that axis to false instead of leaving it out. The optional height and width values will be transferred onto the containing div if they exist.

Credits

Leo Selig, author of jsFancyPlugin (https://github.com/leoselig/jsFancyScroll/).

Also, uses an onResize listener hack from https://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/client/ui/ResizeLayoutPanel.java