Package Exports

ractive-component-baron

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ractive-component-baron) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ractive-component-baron

Ractive component wrapping Baron.js scroller library.

Usage:

npm install ractive-component-baron
In your app do require('ractive-component-baron'); This will add the Scroll object to Ractive.components.

In your Ractive template:

<Scroll class="myscroll" id="..." disable='..boolean..' dir='...' opts='..object..'>
  ... scrollable content
</Scroll>

All attributes are optional. Use disable='true' when native scroll is preferable. dir may be one of 'x' for horizontal scroll, 'y' for vertical scroll (default) or 'xy' for bidirectional scroll. opts allows to extend default Baron options, which are:

defaultOpts = {
  scroller: '.scroller',
  bar: '.scroller__bar_v',
  barOnCls: 'baron',

  $: function(selector, context) {
    return bonzo(qwery(selector, context));
  },
  event: function(elem, event, func, mode) {
    (mode == 'trigger') && (mode = 'fire');
    bean[mode || 'on'](elem, event, func);
  }
}

Include baron.css from the repository tweaked to your needs.
Fix height and/or width of .myscroll using some CSS.

See example/ directory for working example. Run npm install in both root and example directories, then node server.js and go to localhost:3333 in your browser.

Note that Baron uses MutationObserver to update scroller when necessary.

License

MIT