click and hold to scroll, touchstart, touchmove, t

Question

I have a scrollable div. I want people to be able to scroll the list through 'hold', and also select a button for click.

The problem is that when a button is held in order to scroll the div, it is triggering the click function.

I want that do not trigger when scrolling. I need some way to differentiate click of the hold function.

So I'm using:

$('.panel').bind("touchstart mousedown", function (e) {
console.log(e.type);
$(this).addClass('resize');

}).bind("touchmove mousemove", function (e) {
$(this).removeClass('resize');

}).bind("touchend mouseup", function (e) {
$(this).removeClass('resize');
$('.panel').addClass('flip');
});

I thought the following solution.

When '.panel' is mousedown for more than 500 ms, the button activates, pressed:

$(this).addClass('resize');

When '.panel' is mouseup, the button returns to its normal state and then all the buttons make the movement of output:

$(this).removeClass('resize');
 $('.panel').addClass('flip');

BUT if the user mousemove, the mousedown and mouseup actions are canceled.

just do not know how to put this into practice

is something similar to that: http://m.microsoft.com/windowsphone/en-us/demo/default.aspx

Please Suggest.