ember-perfect-scrollbar

Wraps perfect-scrollbar in an Ember.js mixin which can then be easily applied to any component.

Installation

ember install ember-perfect-scrollbar

Usage

import Ember from 'ember';
import { PerfectScrollbarMixin } from 'ember-perfect-scrollbar';
 
export default Ember.Component.extend(PerfectScrollbarMixin, {
  perfectScrollbarOptions: {
    suppressScrollX: true
  },
 
  . . . .
})

You can find valid perfectScrollbarOptions in the perfect-scrollbar documentation.

And once you've set those, you're done! perfect-scrollbar will be applied on didInsertElement and torn down on willDestroyElement.

ember-resize

It also works out-of-the-box with ember-resize. If ember-resize is installed, it'll automatically resize the scrollbar if the element is resized. It uses debouncedDidResize.

Alternatively, you can trigger a resize on your own by calling _resizePerfectScrollbar:

foobar: on('windowResize', function() {
  this._resizePerfectScrollbar()
});