How to use the perfect-scrollbar.initialize function in perfect-scrollbar

To help you get started, we’ve selected a few perfect-scrollbar examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / types / perfect-scrollbar / perfect-scrollbar-tests.ts View on Github external
/**
 * https://github.com/noraesae/perfect-scrollbar#how-to-use
 */

import * as Ps from 'perfect-scrollbar'
const container = document.body

// To initialise the plugin, `Ps.initialize` is used.
Ps.initialize(container)

// It can be initialised with optional parameters.
Ps.initialize(container, {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
})

// If the size of your container or content changes, call `update`.
Ps.update(container)

// If you want to destroy the scrollbar, use `destroy`.
Ps.destroy(container)

// If you want to scroll to somewhere, just use a `scrollTop` property and update.
container.scrollTop = 0
github michaelbromley / skqw / src / render / components / settings-panel / settings-panel.component.ts View on Github external
ngAfterViewInit(): void {
        const container = this.elementRef.nativeElement.querySelector('.panel-body');
        Ps.initialize(container);
    }
github virtool / virtool / client / src / js / base / Scroll.js View on Github external
componentDidMount () {
        Ps.initialize(this.containerNode, pick(this.props, [
            "wheelSpeed",
            "wheelPropagation",
            "minScrollbarLength"
        ]));
    }
github CartoDB / cartodb / lib / assets / core / javascripts / cartodb3 / components / custom-carousel / custom-carousel-view.js View on Github external
_applyCustomScroll: function () {
    Ps.initialize(this._listContainer().get(0), {
      wheelSpeed: 1,
      wheelPropagation: false,
      swipePropagation: true,
      suppressScrollY: true,
      stopPropagationOnClick: false,
      minScrollbarLength: 120,
      useBothWheelAxes: true
    });
    this._checkScroll();
    this._bindScroll();
  },
github peerplays-network / BookiePro / src / components / Exchange / Exchange.jsx View on Github external
componentDidMount() {
    Ps.initialize(this.refs.sidebar);
    Ps.initialize(this.refs.main);
  }
github raviqqe / code2d / app / src / component / ScrollBar.tsx View on Github external
public componentDidMount() {
        perfectScrollBar.initialize(this.container);
    }
github bitshares / bitshares-ui / app / components / Exchange / Exchange.jsx View on Github external
_initPsContainer() {
        if (this.refs.center && this.psInit) {
            let centerContainer = this.refs.center;
            if (centerContainer) {
                Ps.initialize(centerContainer);
                this.psInit = false;
            }
        }
    }
github freenas / webui / src / app / components / common / layouts / admin-layout / admin-layout.component.ts View on Github external
setTimeout(() => {
      Ps.initialize(navigationHold, {
        suppressScrollX: true
      });
    }, 500);
github bitshares / bitshares-ui / app / components / Exchange / Exchange.jsx View on Github external
_initPsContainer() {
        if (this.refs.center && this.psInit) {
            let centerContainer = this.refs.center;
            if (centerContainer) {
                Ps.initialize(centerContainer);
                this.psInit = false;
            }
        }
    }
github bitshares / bitshares-ui / web / app / components / Exchange / OpenSettleOrders.jsx View on Github external
componentDidMount() {
        let orderContainer = ReactDOM.findDOMNode(this.refs.orders);
        Ps.initialize(orderContainer);
    }