Detect if touchstart / touchhend canceled the scroll (scroll by pulse)
I listen to touchstart and touchhend events to make my app more responsive for mobile devices.
the problem is that if you scroll the scrolling (the page still scrolls even after you have the screen with your finger) and then stop the scrolling with a tap - if there is an event on touching the attached element, it will fire.
I need a way to detect if touchstart or touchhend has stopped scrolling, so I can stop any events.
I tried to set a variable in the scroll (I noticed that the scroll event on mobile only after the scroll is complete, the page stopped even when scrolling by a moment):
$(window).scroll(function(){
cancelled_scrolling = true;
setTimeout(function(){
cancelled_scrolling = false;
},200);
});
however, when I click, it seems that the touch will touch before the .scroll () event, as that doesn't work:
$('body').on('touchend', function(){
if(cancelled_scrolling){
alert('ahahahah');
return false;
}
//code to trigger events depending on event.target after here
});
how can i achieve this?
EDIT:
found the answer to this question -
step1 - store scrollTop on touchhend step2 - on touchstart, check saved scrollTop for new scrollTop
- if they do not match, the page was scrolled even after the touchhend event
source to share
In touchStart
track scrollTop
and scrollLeft
for each parent node. The touchMove
check is not changed if any of these values. If so, cancel the touch. This is a little better than just checking for touchEnd
, because maybe they scrolled down the page and then didn't look.
You can also see this logic implemented here: https://github.com/JedWatson/react-tappable/blob/cf755ea0ba4e90dfa6ac970316ff7c35633062bd/src/TappableMixin.js#L120
source to share