How to create step by step onWheel gesture

[Magellol]

Hi 👋

I'm trying to create some sort of sliding carousel based on the onWheel event.
I'd like to be able to trigger the onwheel from the left or the right and move the elements accordingly but step by step, not going all the way to the end or the beginning.
I have a csb here that shows my issue: https://codesandbox.io/s/onwheel-fire-once-f5p7s

If you onWheel over the blue elements, it goes from 0 to 2 and vice versa. I'd like to be able to make it do 0->1, 1->2, 2->1, 1->0 and so on. (kind of how netflix does it).
I feel my approach might not be right since the onWheel listener is fired multiple times and ideally I'd need it only once per actions.

If you have any idea how to accomplish this, I'd appreciate it.
Thanks!

[dbismut]

Here's a rough implementation idea: https://codesandbox.io/s/onwheel-fire-once-5urx7

I suspect the difficulty here is a bit outside the scope of this lib, essentially it's about detecting user intention through wheel events which is not straightforward and might depend on user's hardware I suppose.

Anyway, what's also tough with wheel is that wheel fires for a long time, and in your case you probably don't want to wait for wheel to come to rest, hence the idea in the sandbox to detect decelerating movement. I'd be curious if you've found another implementation somewhere to have a look at their code.

Hope it helps anyway, was fun to try that out :D

[Magellol]

Thank you for your help!
I was mostly looking at how netflix does it on their homepage when you can use the wheel to go back and forth in the carousel.

You're right, I was initially trying to not get the wheel firing for so long by removing the event listener after the first event but I was hitting other issues and it didn't feel snappy enough.

Thanks again, I'll keep doing some experiments and will post back here if I find anything interesting.

[dbismut]

I’ll check Netflix’s page!

[dbismut]

I believe they're using a similar implementation. I might be wrong, but it's not super snappy or reactive so I guess they're also swimming upstream against how wheel works. The sandbox above should do the work then, only I'm using vertical wheel instead of horizontal, but that's a pretty easy fix.

[Magellol]

I think you're right. We're going against how the wheel is designed. I wonder if there is a way to not have it send so many events.

Our current approach works if users don't wheel over a large distance, small distances make it more reactive. Anyway, thank you again for helping me with this!

[jwmann]

@Magellol I'm using a combination of https://github.com/d4nyll/lethargy and a setTimeout() to do exactly this.

Here's an example:

const [scrollFired, setScrollFired] = useState<boolean>( false );
  useEffect( () => {
    const resetScrollFired = setTimeout( () => setScrollFired( false ), 300 );
    return () => {
      clearTimeout( resetScrollFired );
    }
  }, [scrollFired] );


const bindEvents = useGesture({
    onWheel: ( { event, first, delta: [, y] } ) => {
      const handleSwitch = () => {
        if ( y > 0 ) switchItem( 'next', 'scroll' );
        if ( y < 0 ) switchItem( 'prev', 'scroll' );
      }
      const scrolling = event && lethargy.check( event ) !== false;
      if ( !dragging && !first && scrolling && !scrollFired ) {
        setScrollFired( true );
        handleSwitch();
      }
    }
});

The problem I'm having is that Lethargy needs a new event after we trigger a 'switch'.
Do you know if there's a way to remove the OnWheel listener and then rebind it?

Currently in order to do what I want I have to do it manually like this:

  const onWheelHandler = ( event: WheelEvent ) => {
    const scrolling = lethargy.check( event ) !== false;
    if ( !dragging && scrolling && !scrollFired ) {
      const direction = Math.sign( event.deltaY );
      setScrollFired( true );
      if ( direction > 0 ) switchItem( 'next', 'scroll' );
      if ( direction < 0 ) switchItem( 'prev', 'scroll' );
    }
  }
  useEffect( () => {
    window.addEventListener( 'wheel', onWheelHandler );
    return () => {
      window.removeEventListener( 'wheel', onWheelHandler );
    }
  }, [scrollFired] );

But obviously I'd rather use the onWheel Gesture event.

[dbismut]

Hey @jwmann have a look at this sandbox and tell me how it works for you:
https://codesandbox.io/s/onwheel-fire-once-5urx7

You should be able to scroll through slides one by one using the vertical wheel.

It's not as advanced as lethargy though, and I have only tested it on my MacBook trackpad and Magic Mouse.

If you do want to use lethargy, here's a sandbox that I think reproduces lethargy's logic correctly.
https://codesandbox.io/s/onwheel-fire-once-2coe8

[jwmann]

@dbismut I appreciate the help.
Unfortunately your first example doesn't work well with Trackpads with inertia.
You can't scroll quickly, you must wait until last is called, which on a trackpad with inertia can take up to 2-3 seconds.

This is the entire reason why I'm using Lethargy. I appreciate you trying to make an example with Lethargy, however you're not quite using the LethargyJS library properly.
It's just a way to tell if the wheel scroll the user makes is 'enough' to trigger a real scroll, including trackpad. So it must be used in conjunction with a timeout.

Here's an updated version of your example:
https://codesandbox.io/s/onwheel-fire-once-with-lethargy-vd7w2

It works really well on non-Windows computers.
For some reason on windows, the event is always the same scroll event, so lethargy thinks it detecting a massive scroll and so it doesn't work after the first scrolls.

Surprisingly, it seems to work well on all Platforms now.
Not sure what I did differently when I made the example on codesandbox but I fixed my issue

[dbismut]

@jwmann

You can't scroll quickly, you must wait until last is called, which on a trackpad with inertia can take up to 2-3 seconds.

Hm no, I'm not using last in that example, that I specifically built with inertia in mind and it works on my trackpad. It's very likely that Lethargy does a better job at this though.

It's just a way to tell if the wheel scroll the user makes is 'enough' to trigger a real scroll, including trackpad. So it must be used in conjunction with a timeout.

Lethargy is just a way to distinguish real scroll events from inertia-triggered scroll events. You might use Lethargy so that you can only scroll one frame at a time (which seems to be your intent), but there's no improper use of Lethargy in the example above as far as I'm aware. There's nothing on Lethargy readme that implies using a timeout.

Here's my last sandbox modified to use Lethargy. It doesn't involve using a timeout, it works just fine with my Macbook trackpad.

https://codesandbox.io/s/onwheel-fire-once-2coe8

[jwmann]

@dbismut
I think we're both on the same page about Lethargy.

Although I'm using a timeout, your new example still uses a reference to achieve the same result.
I'm just using a timeout because of an animation that I want to wait until it completes.

That being said, I no longer have the original issue I described with the event. I think the only thing I changed was checking lethargy after making sure it was scrolling (aka !first && !last) instead of checking it right away and then checking for scrolling.

So, thank you for helping me fix that! 😆