In iOS safari, when user touch stop the scrolling element, event.target cannot return the correct element under the finger

Question

Problem

Here is the example, test it on iOS safari please.

In this example, when user touches one anchor, the background of anchor at the touch position will turn gray.

When user scrolls the element, and immediately touches the element to make it stop before it stops by self. The wrong element will turn gray. In fact, the anchor at the touch position before scrolling will turn gray.

Possible Solutions

1. The best solution is getting the correct anchor at the touch position when touching-stop the scrolling element.

2. If the correct anchor cannot be gotten, stop gray-turning when touch-stop the scrolling element is accepted. But how can i know whether user is touching-stop the scrolling element or simply tapping? In other words, how can I know whether the element is scrolling?

Answer 1

run into this issue too. Scrolling List of search results, tap one and get the details. This would only work when the scrolling hat absolutely stopped. As long as there was still some movement in the list, the tap would pick the wrong item.

simple solution: disable the native scrolling, take out

-webkit-overflow-scrolling: touch;

It does not scroll that nicely anymore but the tap does work now.

At this point you can look into libraries that bring back the nice scrolling effects, if you really need it.