Simplebar: Horizontal Scrolling with Mouse Wheel

[JoshClose]

How would you recommend changing the scroll wheel to scroll horizontally on an area that only scrolls horizontally?

[Grsmto]

You can use the wheel event as described here: https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Listening_to_this_event_across_browser

Listen to this event on the SimpleBar element and then trigger scroll with something like this:

el.SimpleBar.getScrollElement().scrollTo(deltaY, 0)

[JoshClose]

There doesn't seem to be a scrollTo method.

This did work though.

e.currentTarget.SimpleBar.getScrollElement().scrollLeft += e.deltaY;

Anything wrong with that?

[Grsmto]

Hmm you're right, scrollTo is only on the window element! My bad :)
Nothing wrong with what you did I think.

[strarsis]

@Grsmto: Is this feature available in latest version?
If not, could horizontal scrolling by mouse-wheel be added as a feature?
Or are there libraries that can be used that can add this the right way?

[ch3rn1k]

Well, I'm using this solution:

let horizontalElements = document.querySelectorAll('[data-simplebar]');
for (let element of horizontalElements)
element.onwheel = (event) => {
  event.preventDefault();
  let elementToScroll = element.querySelector('.simplebar-content-wrapper');

  clearTimeout(elementToScroll.timer);
  elementToScroll.timer = setTimeout(() => {
    elementToScroll.scrollTo({ left: event.deltaY > 0 ? elementToScroll.scrollLeft + 250 : elementToScroll.scrollLeft - 250, behavior: 'smooth' });
  }, 20);
};

But anyway I haven't found a solution for firefox glitchy bug on scroll. Works fine in chrome.

[strarsis]

@ch3rn1k: Thanks for the example code. It would be great if such a functionality is implemented in this library and take all the browsers into account.

[Al-Sharif]

Thank you @ch3rn1k , worked for me.