Can't get invertDelta to work.

[jesperlandberg]

I basically copied the invertDelta example but I can't get it to work.

I'm using windows 10, and I have the same issue in all the browsers, using smooth-scrollbar version 8.1.11.

The scrollbar is initialised and working (I can scroll by dragging the scrollbar), except it seems to be "ignoring" my event option.

My application is built using Vue.js.

Code:

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/],
                    },
                },
            })
        }
    }
}

I'm using the Plugin system on another page of the application without any issues, do you see anything weird or incorrect stuff in my code above?

[idiotWu]

Is there any online demo or repository that reproduces this issue? I think it needs more debugging.

[jesperlandberg]

@idiotWu scroll wheel is not loggin anything to the console when i console.log(delta, fromEvent), however swiping left/right on my touchpad does.

What I'm trying to archive is exactly this http://paack.fr/ . I know they used smooth-scrollbar but they modified the src files before the plugin builder was released.

[idiotWu]

Is this module loaded before using Scrollbar.init()? I think it may be something relates to loading order. It would be much safer if you code as following:

// inver-delta.js
import Scrollbar, { ScrollbarPlugin } from 'smooth-scrollbar';

class InvertDeltaPlugin extends ScrollbarPlugin {}

Scrollbar.use(InvertDeltaPlugin);

export default Scrollbar;

// app.js
import Scrollbar from './invert-delta';

Scrollbar.init(elem);

[jesperlandberg]

@idiotWu thanks, but same issue. Scrollbar is initalised but it doesnt listen to scrollwheel or vertical scrolling on the touchpad.