How to use smooth-scrollbar - 10 common examples

componentUpdated (el, binding) {
        const scrollbar = Scrollbar.get(el)
        if (!scrollbar) return

        // remove old listener, if defined
        const oldListener = bestListener([binding.oldValue, options])
        if (oldListener) scrollbar.removeListener(oldListener)

        // add the new listener, if defined
        const listener = bestListener([binding.value, options])
        if (listener) scrollbar.addListener(listener)

        // refresh
        scrollbar.update()
      },
      unbind (el) {

import Scrollbar from 'smooth-scrollbar';
import * as Prism from 'prismjs';
import 'prismjs/themes/prism.css';

import './monitor';
import './controller';
import '../styles/index.styl';

// for debug
(window as any).Scrollbar = Scrollbar;

Prism.highlightAll(false);

(document.getElementById('version') as HTMLElement).textContent = Scrollbar.version;

import React from 'react';
import ReactDOM from 'react-dom';
import Scrollbar from '../src/react-smooth-scrollbar.js';
import SmoothScrollbar from 'smooth-scrollbar';
import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll';

SmoothScrollbar.use(OverscrollPlugin);

class App extends React.Component {
    state = {
        damping: 0.1,
        count: 3,
    };

    randomDamping() {
        const nextState = {
            damping: Math.random() * 0.5 + 0.1,
            count: Math.random() * 10 | 0,
        };

        console.log(nextState);

        this.setState(nextState);

inserted (el, binding) {
        const possibilities = [binding.value, options]
        const scrollbar = Scrollbar.init(el, bestOptions(possibilities))

        const listener = bestListener(possibilities)
        if (listener) scrollbar.addListener(listener)

        el.dispatchEvent(new CustomEvent('insert', { detail: el }))
      },
      componentUpdated (el, binding) {

useEffect(() => {
    setScrollbar(
      Scrollbar.init(scrollableElRef.current, {
        alwaysShowTracks: true,
        continuousScrolling: true,
      })
    );
  }, []);

init() {
        this.Scroll = Scrollbar.init(document.querySelector('.scrollarea'), {
            delegateTo: document,
            continuousScrolling : false,
            overscrollEffect: 'bounce',
            damping: 0.05,
            plugins: {
                horizontalScroll: {
                    events: [/wheel/],
                },
            },
        })

        this.Scroll.track.xAxis.element.remove()
        this.Scroll.track.yAxis.element.remove()

        Scrollbar.detachStyle()

initiateScrollbar() {
    const options = {};
    const element = document.querySelector('.tab-pane.active');
    if (element) {
      Scrollbar.init(element, options);
    }
   }

componentDidMount() {
    this.scrollbar = SmoothScrollbar.init(this.container, this.props);

    this.scrollbar.addListener(this.handleScroll.bind(this));

    this.props.innerRef(this.scrollbar);
  }

thumbMinSize: 20,
  renderByPixels: !('ontouchstart' in document),
  alwaysShowTracks: false,
  continuousScrolling: true,
};

const overscrollOptions = {
  enable: true,
  effect: navigator.userAgent.match(/Android/) ? 'glow' : 'bounce',
  damping: 0.2,
  maxOverscroll: 150,
  glowColor: '#222a2d',
};

const scrollbars = [
  Scrollbar.init(document.getElementById('main-scrollbar') as HTMLElement, {
    ...options,
    delegateTo: document,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
  Scrollbar.init(document.getElementById('inner-scrollbar') as HTMLElement, {
    ...options,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
];
const controller = new dat.GUI();

function updateScrollbar() {

speed: variables.scrollBarMobileSpeed
                };
                transformDelta(delta, fromEvent) {
                    if (fromEvent.type !== 'touchend') {
                        return delta;
                    }

                    return {
                        x: delta.x * this.options.speed,
                        y: delta.y * this.options.speed
                    };
                }
            }
            Scrollbar.use(MobilePlugin);
        }
        variables.scrollBar = Scrollbar.init(
            variables.element,
            variables.scrollBarOptions
        );
        let position = 0,
            direction,
            isVisible;
        variables.scrollBar.addListener(status => {
            if (status.offset.y > position) {
                direction = 'down';
            } else {
                direction = 'up';
            }
            position = status.offset.y;
            for (let a = 0; a < variables.elements.length; a++) {
                isVisible = variables.scrollBar.isVisible(
                    variables.parentElements[a]