.js

import Scrollbar, { ScrollbarPlugin } from 'smooth-scrollbar'

class InvertDeltaPlugin extends ScrollbarPlugin {
  static pluginName = 'invertDelta'

  static defaultOptions = {
    events: [],
  }

  transformDelta(delta, fromEvent) {
    if (this.shouldInvertDelta(fromEvent)) {
      return {
        x: delta.y,
        y: delta.x
      }
    }

    return delta
  }

  shouldInvertDelta(fromEvent) {
    return this.options.events.some(rule => fromEvent.type.match(rule))
  }
}

Scrollbar.use(InvertDeltaPlugin)

export const scrollbarHorizontal = {
    mounted () {
        this.initScrollbar()
    },
    beforeDestroy () {
        Scrollbar.destroy()
    },
    methods: {
        initScrollbar () {
            const el = document.querySelector('[data-scroll-horizontal]')

            Scrollbar.init(el, {
                plugins: {
                    invertDelta: {
                        events: [/wheel/],
                    },
                },
            })
        }
    }
}