I have an image slider that is horizontally scrollable. Bellow the image slider there is a component with 2 arrow buttons like < . . . . . . > . When the user either clicks on the left/right buttons or scrolls the container a scroll is executed.

The problem I have is that I found no way to execute only the scroll handler of the buttons or only one from the container. When a user clicks on the arrow button, the container scroll is triggered too and I have to avoid that.

I've tried:

1. Setting a state like 'arrowButtonIsPressed' true/false and switching between scroll event handlers but it doesn't sync because the state change is happening before the scroll ended.

2. When the user clicks on the arrow button, I remove the event handler for Container Scroll, execute scrolling, then add Container Scroll back so the user could continue normal scrolling but with a setTimeout(). But if clicking arrow buttons fast, is messing up the scroll handler logic.

3. I've tried to detect when scrollIntoView animation finishes (used when clicking on the arrow button), but with no success.

ParentComponent.tsx > ScrollComponent.tsx(container: ParentComponent)

Screenshoot

P.S. The reason I have scroll event handlers at all is to calculate the position of the active element (big dot) from both Container scroll and Button click scrollIntoView.