Tabview Scrollable. Add mousewheel interaction for horizontal scroll

[hartum]

I'm submitting a ...

[ ] bug report
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

I was looking at tabview Scrollable, and looks fantastic.
Just playing with it horizontal scroll, Mac mouse works really great,
but nothing happens in other OS (ubuntu, windows 10) when I try to use central mousewheel.

It would be great if component captured the mouse wheel event to scroll horizontally when the pointer is over the tabView.

Is it possible to implement this functionality?

Thanks a lot in advance and best regards.

[melloware]

I am able to handle the mousewheel on the tabs no problem. The issue I am having is stopping the mousewheel from scrolling the outer window as its a bad experience.

[melloware]

Ughhh its a React problem at its core with onwheel events: facebook/react#14856

This workaround seems to be the only thing that works...

That being said, it's the only solution that worked for me, so I have encapsulated it in a hook:

function useWheelHack(timeout = 300) {
  const wheelTimeout = useRef()

  // block the body from scrolling while wheelTimeout is set
  useEffect(() => {
    const maybeCancelWheel = (e) => wheelTimeout.current && e.preventDefault()
    document.body.addEventListener('wheel', maybeCancelWheel, { passive: false })
    return () => document.body.removeEventListener('wheel', maybeCancelWheel)
  }, [])

  // return a function that can be used to prevent scrolling for timeout ms
  return () => {
    clearTimeout(wheelTimeout.current)
    wheelTimeout.current = setTimeout(() => {
      wheelTimeout.current = false
    }, timeout)
  }
}

Usage:

const preventWheelDefault = useWheelHack()

return (
  <someElement
    onWheel={(event) => {
      preventWheelDefault()
      // do other stuff here...
    }}
  />
)

[hartum]

I have to say I am impressed, super fast response and solution (hack included).

@melloware you are my hero.

Thanks a lot.