

divタグのcssに「overflow-y: scroll;-webkit-overflow-scrolling:
touch;」を設定し、iOSのwebviewにて画面の一部を慣性スクロールするように設定をしています。

divタグ内にリストやテーブルを作成し、各行タップ（touchstart or
touchend）により異なるページへ遷移するようにイベントを指定しているのですが、慣性スクロール中にタップすると慣性スクロール前の画面表示の位置にある行がタップされてしまい、意図しないページへ遷移します。

慣性スクロール中にタップした場合、どのようなイベント設定にすると画面表示通りの行タップになるのでしょうか。  
※画面の一部ではなく、全体のスクロールにした場合は想定通りの動作をします。

以下、簡易なサンプルコードです。

[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>
    
[/code]


CC BY-SA 3.0
2017-04-11T09:14:18.810
33931
2018-10-26T05:00:55.837
22498
question
javascript
画面一部の慣性スクロール中のtouchstartイベントによる動作について


自己回答になります。  
投稿してからしばらく経ちましたが、  
その後の調査で、UIWebviewの場合のみ起きるようです。  
ブラウザ（Safari、Chrome）、WKWebviewの場合は正常にタップ位置を取得することができました。  
もしかすると何かしらの方法が存在するかもしれませんが、今回はUIWebviewの仕様ということで自己解決とします。  
ありがとうございました。


CC BY-SA 3.0
2017-05-12T06:49:50.903
34654
2017-05-12T06:49:50.903
22498
33931
answer