iOS CSS Overflow Touch/Click event issue

[ProcuraIsaac]

I posted the question on StackOverflow too, but you are probably a better person to track this down.

As I flick the list up or down and tap an item while scrolling it fires the click event of wrong item. It is typically one that was visible before the scrolling started.

How can I make sure it responds to the one I am tapping on when the scroll animation is running?

FYI, I had this same issue with my own tap event handling.

Here is the fiddle.

http://jsfiddle.net/Y4vZA/

Here is the full page view that you can browse using iOS.

http://jsfiddle.net/Y4vZA/embedded/result/

[jtangelder]

Hi,

Interesting.. i did some searching, and found this thread on stackoverflow: http://stackoverflow.com/questions/8546863/current-scroll-position-when-using-webkit-overflow-scrollingtouch-safari-ios

Seems that no JS is running while scrolling. Maybe you can detect if the document has scrolled, and then allow the tap event. Something like this maybe..:

var $div = $("div");
var last_scrolltop = $div.scrollTop();

// triggered when scrolling has ended
$(window).scroll(function() {  
  last_scrolltop = $div.scrollTop();
});

$div.bind("tap", function() {
  if(last_scrolltop == $div.scrollTop()) {
    alert('tap!') 
  }
});

I'm not sure if this would work

[jtangelder]

...but it is still a vendor prefixed feature, maybe the works will change, so i personally wont spent to much time on it!

[amk221]

In case anybody is interested in a partial solution, preventing taps during scroll-momentum creates a satisfactory result: http://jsfiddle.net/amk221/6kxL2/3

[eirikhm]

This can be solved by some voodoo magic in the tap / touch event:

target = $(document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset));

That's the essential bits.

See https://github.com/ftlabs/fastclick/issues/57