I created a mobile web page with React.
This page sets the timer.
Drag the hours, minutes, and seconds with your finger to scroll through the component and select a number.
There is a problem.
Hours, minutes, and seconds are separate components. But when you scroll one of the components and click anywhere on the screen, the scrolling component stops. Similarly, if you scroll through the Minutes component while scrolling by pushing the Hours component with your fingers, it is considered a touch, and the scrolling of the Hours component stops unnaturally along the way.
I want to make that scrolling of a component stops only when touched by that component.
I don’t want to be affected by the touch of the external area of the component.
But I heard that if you touch the screen with the default behavior of the browser, the ongoing scrolling motion stops.
How can I implement it the way I want it??

I use onScroll event and I use chrome mobile browser.
Thank you for reading.