I know that you can get and respond to touch details with the event.touched method.
You could call an if statement on this method to take different action dependent on the extend of finger movement.
For example, using event.changedTouches[0]  inside a touchstart event listener and measuring that against
event.changedTouches[0] in a 'touchend' event listener. However, I am not certain how to implement that as I do not
have a touchscreen laptop so I cant experiment with the Javascripts touch event methods
(cancel, end, move or start). Therefore, knowing what I do know I would try these approaches...


1. You could change 'touchstart' (which fires on screen pressdown) to 'click' so that the function only fires on click
behavior(which would need a 'finger down then finger up' action to work).
I would also put in event.preventDefault() to stop default form submission behavior...

$(function(){
$(document).on("click", "#start", (event) => {
event.PreventDefault();
console && console.log("we think the user pressed a button but might have just started a scroll from the button");
  });
});


2. This function tests for the length of the touchstart. You could then make different choices
depending on whether the finger touch was more than 400 milliseconds...

(function() {
	var long = 4000;
	var start;
	$( "#start" ).on( 'mousedown', function( e ) {
	    go = new Date().getTime();
	} );

	$( "#start" ).on( 'mouseleave', function( e ) {
        go = 0;
    } );

	$( "#start" ).on( 'mouseup', function( e ) {
	    if ( new Date().getTime() >= ( go + long )  ) {
	       console.log('trigger scrolling behaviour here');
	    } else {
	       console.log('trigger click button behaviour');
	    }
	} );
}());