I have a container with react components that i'm able to scroll through horizontally which is behavior that I want but when I attempt to focus on individual component/element to drag it our of container, the container/page still wants to scroll. I am developing in react and I am able to achieve the dragging behavior I want only when i enable/toggle "touch-action" to "none" on the element's CSS but by doing so, it disables the horizontal scrolling on the container that holds these react elements/components.
I wanted to call 'setTimeout' to trigger on 'pointerDown', a function that checked if pointer was still down after a short amount of time i.e 1 second to indicate the user wants to drag the element rather than scroll but I couldn't find API call/method in docs to check if pointer is still down.
One method I tried was calling 'setTimeout' passing in a function that would toggle 'touch-action' on the draggable elements to 'none' after 1 second and then on 'pointerUp' event, i called 'clearTimeout' to cancel that 'setTimeout' because if the 'pointerUp' event happened quickly after 'pointerDown' that likely meant the user was scrolling and not attempting to drag but that method didn't work out as the 'clearTimeout' failed to cancel the 'setTimeout' in the 'pointerDown' event. So not sure what to do at this point. Any guidance would be greatly appreciated!