I'm making an application that will be used for touch and mouse devices where their respective events are handled slightly differently.

The standard practice for this is to use e.preventDefault() on touchstart because it fires before mousedown. preventDefault prevents the mousedown event from being called.

In my situation, I'm completely fine with disabling pretty much all 'default' actions of all touch/click events throughout the app apart from one aspect which is scrolling.

I have tried a few hacky workarounds to this by passing variables but it isn't quite robust.

I wonder what would be the best way to replicate the default movement of scrolling using e.preventDefault on mousestart and on mousemove (and thereby disabling it)? I can think of the standard way of simply listening to onscroll, calculating offset of mouse movement, and applying it to the element in question's scrollY, but that might take up battery due to the excessive javascript usage (though perhaps it isn't much different from native scrolling?). This is important since my app is an e-reader-like app. Also, I would have to manually replicate the 'flick' scroll too, which may not feel as natural.

Any thoughts would be appreciated!