Listen to scroll on another container

[MrUltimate]

Hello!

By default, react-curtains listens to the window scroll for animating the curtains. This unfortunately doesn't work in some cases where you're scrolling a different container. Is there an easy way to listen to the scroll of another container and use the useCurtainEvents("onScroll") hook?

Thanks!

[martinlaxenaire]

Hi @MrUltimate,

Of course you can update the scroll values manually if you want.

First you should disable the watchScroll property of your <Curtains /> component:

<Curtains
    watchScroll={false}
    // ... your other options
>
    <App />
</Curtains>

Then, wherever your scrollable container lies, you should be able to do something like that:

useCurtains((curtains) => {
    const onScroll = () => {
      // assuming it's a vertical scroll
      const scrollValue = container.current.scrollTop;
      curtains.updateScrollValues(0, scrollValue);
    };
    
    container.current.addEventListener('scroll', onScroll);
    
    return () => container.current.removeEventListener('scroll', onScroll);
  });

This is untested but should work fine.

Cheers,