web-dev-qa-db-ja.com

`-webkit-overflow-scrolling：touch`はiOS7の最初のオフスクリーン要素に対して壊れています

GMシードがリリースされたので、今それについて話すことができます！

IOS7では「-webkit-overflow-scrolling：touch」が壊れているようです。最初に画面外にある要素のタッチイベントは発生しません（または、場合によっては信頼性がありません）。

以下に例を示します。

<!DOCTYPE html><html>
    <head><title>TEST</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="Apple-mobile-web-app-capable" content="yes" />
    <style>

        #scrollbox {
                position: fixed;
                top: 0px;
                width: 100%;
                height: 100%;
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
        }

        .touchDiv {
            position: relative;
            width:100%;
            height:80px;
            background-color: #FFBBBB;
        }

        ul, li {
            text-indent: 0px;
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        li {
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #333;
        }

    </style>
    <script type="text/javascript">

        function onBodyLoad() {
            var touchDiv = document.getElementById("bottomDiv");
            touchDiv.ontouchstart = function(e) {
                alert("touched");
            };

            touchDiv = document.getElementById("topDiv");
            touchDiv.ontouchstart = function(e) {
                alert("touched");
            };
        }
    </script>
    </head>


    <body onload="onBodyLoad()">


        <div id='scrollbox'>
                <div id="topDiv" class="touchDiv">Fires an event when touched</div>
                <ul>
                    <li><a href='#' onclick="alert('1')">Link 1</a></li>
                    <li><a href='#' onclick="alert('3')">Link 3</a></li>
                    <li><a href='#' onclick="alert('4')">Link 4</a></li>
                    <li><a href='#' onclick="alert('5')">Link 5</a></li>
                    <li><a href='#' onclick="alert('6')">Link 6</a></li>
                    <li><a href='#' onclick="alert('7')">Link 7</a></li>
                    <li><a href='#' onclick="alert('8')">Link 8</a></li>
                    <li><a href='#' onclick="alert('9')">Link 9</a></li>
                    <li><a href='#' onclick="alert('10')">Link 10</a></li>
                    <li><a href='#' onclick="alert('11')">Link 11</a></li>
                    <li><a href='#' onclick="alert('12')">Link 12</a></li>
                    <li><a href='#' onclick="alert('13')">Link 13</a></li>
                    <li><a href='#' onclick="alert('14')">Link 14</a></li>
                    <li><a href='#' onclick="alert('15')">Link 15</a></li>
                    <li><a href='#' onclick="alert('16')">Link 16</a></li>
                    <li><a href='#' onclick="alert('17')">Link 17</a></li>
                    <li><a href='#' onclick="alert('18')">Link 18</a></li>
                    <li><a href='#' onclick="alert('19')">Link 19</a></li>
                    <li><a href='#' onclick="alert('20')">Link 20</a></li>
                    <li><a href='#' onclick="alert('21')">Link 21</a></li>
                    <li><a href='#' ontouchstart="alert('22')">Link 22</a></li>
                </ul>
                <div id="bottomDiv" class="touchDiv">Fires an event when touched 2</div>

        </div>

</body>

これにより、モバイル向けに最適化されたWebアプリの大部分が破壊されると思います。

上記のコードに問題はありますか？および/または回避策はありますか？

（Apple-しばらく前に、応答がありませんでした）でバグを既に発生させています）

ioshtml5web-applicationswebkitios7
22
Nick H247

Apple dev forums でこの問題の回避策があるように見えます

バイコイアヌ氏に感謝します。

基本的に、親スクロールdivでタッチイベントをリッスンする必要があります。したがって、私の場合は次を追加します。

document.getElementById("scrollbox").addEventListener('touchstart', function(event){});

onBodyLoad関数に。

これはイベント伝播の問題であり、より高いレベルでリッスンすることで解決されると思います。

30
Nick H247

上記の答えは私にとってはうまいことです。上記の修正のjQueryバージョンは次のとおりです。

$('#scrollbox').on('touchstart', function(event){});
7
DigitalJohn