How to use perfect-scrollbar - 10 common examples

/**
 * 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

// 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
Ps.update(container)

/**
 * https://github.com/noraesae/perfect-scrollbar#jquery
 */

import mountJQuery = require('perfect-scrollbar/jquery')
mountJQuery($)

$('#container').perfectScrollbar()            // Initialize
$('#container').perfectScrollbar({ /*...*/ }) // with options
$('#container').perfectScrollbar('update')    // Update
$('#container').perfectScrollbar('destroy')   // Destroy

componentDidUpdate(prevProps, prevState) {
    //reset scroll area in sidebar and betting widget upon route change.
    Ps.update(this.refs.sidebar);
    Ps.update(this.refs.main);

    // navigate to new route after clicking confirm button in confirmation modal.
    if (prevState.confirmToLeave === false && this.state.confirmToLeave === true) {
      this.props.navigateTo(this.state.nextLocation);
      this.setState({
        confirmToLeave: false
      });
    }
  }

_changeTab(tab) {
        SettingsActions.changeViewSetting({
            historyTab: tab
        });
        this.setState({
            activeTab: tab
        });

        // Ensure that focus goes back to top of scrollable container when tab is changed
        let historyNode = this.refs.history;
        historyNode.scrollTop = 0;
        Ps.update(historyNode);

        setTimeout(ReactTooltip.rebuild, 1000);
    }

(async () => {
                const container = await this.getScrollContainer();
                container.style.overflow = 'hidden';
                this.scrollBar = new PerfectScrollbar(container, this.scrollOptions);
                this.toDisposeOnDetach.push(Disposable.create(() => {
                    if (this.scrollBar) {
                        this.scrollBar.destroy();
                        this.scrollBar = undefined;
                    }
                    // tslint:disable-next-line:no-null-keyword
                    container.style.overflow = null;
                }));
            })();
        }

} else {
                Ps.initialize(asksContainer);
                this.psUpdate();
            }
            this.refs.askTransition.resetAnimation();
            if (this.refs.hor_asks) this.refs.hor_asks.scrollTop = 0;
        }

        if (
            this.props.horizontal &&
            this.props.hideScrollbars &&
            nextState.showAllBids != this.state.showAllBids
        ) {
            let bidsContainer = this.refs.hor_bids;
            if (!nextState.showAllBids) {
                Ps.destroy(bidsContainer);
            } else {
                Ps.initialize(bidsContainer);
                this.psUpdate();
            }
            this.refs.bidTransition.resetAnimation();
            if (this.refs.hor_bids) this.refs.hor_bids.scrollTop = 0;
        }

        // if (!nextProps.marketReady) return false;
        return true;
    }

ngAfterViewInit(): void {
        const container = this.elementRef.nativeElement.querySelector('.panel-body');
        Ps.initialize(container);
    }

const nodes = csv_export_container.childNodes;
            let csv = "";
            for (const n of nodes) {
                //console.log("-- RecentTransactions._downloadCSV -->", n);
                const cn = n.childNodes;
                if (csv !== "") csv += "\n";
                csv += [textContent(cn[0]), textContent(cn[1]), textContent(cn[2]), textContent(cn[3])].join(",");
            }
            var blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
            var today = new Date();
            saveAs(blob, "gxbhist-" + today.getFullYear() + "-" + today.getMonth() + "-" + today.getDate() + ".csv");
        }

        if (!this.props.fullHeight) {
            let t = this.refs.transactions;
            ps.update(t);

            this._setHeaderHeight();

        }

    }

window._ = require('lodash');

try {
    window.Vue = require('vue');
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    window.PerfectScrollbar = require('perfect-scrollbar').default;
    window.moment = require('moment');
    window.Swal = require('sweetalert2').mixin({
        customClass: {
            confirmButton: 'btn btn-success',
            cancelButton: 'btn btn-danger'
        },
        buttonsStyling: false,
    });

    require('bootstrap');
    require('bootstrap-material-design');
} catch (e) {
    console.error(e);
}

Vue.use(require('./plugin').default);

componentDidMount () {
        Ps.initialize(this.containerNode, pick(this.props, [
            "wheelSpeed",
            "wheelPropagation",
            "minScrollbarLength"
        ]));
    }