How do I prevent default scroll when swipe over specific elements?

Question

I am trying to make a drag and drop list like the one I am linking below but I want to make it usable for mobile users too, I have an idea about how I could so using touch events, one problem however I don't know how to solve is that while trying to move the elements up and down, the page will scroll up and down by default, is there a way to fix it?

https://code.sololearn.com/WA9a6A2A25A1/?ref=app

Answer 1

try override window.onscroll event
store ur current x, y scroll pos when start dragging, and override the event using scrollTo() function
then reset it back after done dragging

Answer 2

Lily Mea I actually thought about another way that may be easier, I could use CSS to turn overflow of the body to hidden when the specific element is touched and then turn overflow back when touch ends. I will try to make it so that the touch on the element should be longer than 1 second for the CSS to change using setTimeout() and I think this will work well.