Shift + Scroll support plugin

[DjSt3rios]

Hello my friends, I made a little plugin that will allow users to scroll horizontally by holding the shift key. I hope someone finds this useful:

import { ScrollbarPlugin } from 'smooth-scrollbar';

export default class ShiftScrollPlugin extends ScrollbarPlugin {
  static pluginName = 'ShiftScroll';

  transformDelta(delta: { x: any; y: any; }, fromEvent) {
    return /wheel/.test(fromEvent.type) && fromEvent.shiftKey ? { x: delta.y, y: delta.x } : delta;
  }
}

You can then do something like this to activate it:

Scrollbar.use(ShiftScrollPlugin, /* OverscrollPlugin, ... */);
Scrollbar.init(document.querySelector('#scroll'));

Big thanks to @idiotWu for showing me how to create this plugin 😁

If someone has trouble compiling and using the plugin, you can download the javascript from here and simply import it using the script tag:
Download

[idiotWu]

Thanks for sharing 🤗 !

Have you tried using fromEvent.shiftKey property directly to check if the shift key is pressed? Thought we might not need those event listeners defined in onInit() method.

See #366 (comment)

[DjSt3rios]

I tried but there is no such property apparently. The error I get is:
Property 'shiftKey' does not exist on type 'Event'

[DjSt3rios]

Actually I just realized my IDE set the type to "Event" which is wrong, I tried removing the type and now it works. I will update it! Thanks 😁

[idiotWu]

Just created a demo for this plugin: https://codepen.io/idiotWu/pen/VwbborM