javascript – About the operation by the touchstart event during inertial scrolling of a part of the screen

Question: Question:

"Overflow-y: scroll; -webkit-overflow-scrolling: touch;" is set in the css of the div tag, and a part of the screen is set to inertially scroll in the iOS webview.

I created a list or table in the div tag and specified an event to transition to a different page by tapping each row (touchstart or touchend), but if I tap during inertial scrolling, the position of the screen display before inertial scrolling The line in is tapped, and you will be taken to an unintended page.

If you tap during inertial scrolling, what kind of event settings will make the line tap as displayed on the screen?
* If you scroll the entire screen instead of a part of the screen, the operation will be as expected.

Below is a simple sample code.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div {border:1px solid;width:100%;height:500px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
        ul {list-style:none;}
        li {height:150px; border-bottom:1px solid;}
    </style>
    <script type="text/javascript">
        var onLoad = function () {
            elements = document.getElementsByTagName('li');
            for (var i = 0; i < elements.length; i++) {
                elements[i].addEventListener('touchstart', function (e) {
                    console.log(e.target.innerText);
                });
            }
        };
    </script>
</head>
<body onLoad="onLoad()">
    <div>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
            <li>f</li>
            <li>g</li>
            <li>h</li>
            <li>i</li>
            <li>j</li>
            <li>k</li>
            <li>l</li>
            <li>m</li>
            <li>n</li>
        </ul>
    </div>
</body>
</html>

Answer: Answer:

It will be a self-answer.
It's been a while since I posted it,
Subsequent investigations seem to occur only for UIWebview.
In the case of browser (Safari, Chrome), WKWebview, I was able to get the tap position normally.
There may be some method, but this time it is a self-solving because it is a specification of UIWebview.
Thank you very much.

Post Views: 2
Scroll to Top