9

数日間、webkit-overflow-scrolling touch で立ち往生しています。私は非常に簡単なことをしようとしていますが、それは難しいことがわかっています!

特定の要素をクリックすると、それを JS で取得して何かを実行したいと考えています。ただし、「webkit-overflow-scrolling: touch」div にある場合、iOS の勢いのあるスクロールが引き継がれるとすぐに、要素が追いついていないように見えます。IE スクロールを開始し、リストがまだスクロールしている間に 1 つタップすると、間違った要素にアクセスしているように見えますか? 理想的には、勢いスクロールがいつ開始されたかを特定したいのですが、まだ進行中の場合は、最初に要素を選択するのではなく、タップするだけで停止しますが、基本的なことさえまだ機能していません。

iOS 6.01 を搭載した iPad 3 でこれをテストしています。onscroll イベントも気まぐれに見え、iOS の普遍的な使用とは異なり、スクロールの終了時以外にトリガーされることがあるため、webkit のスクロールは非常にバグが多いようです。

iScroll を使用したり、webkit-overflow-scroll をオフにしたりせずに、この動作を正しく機能させる方法についてアイデアがあれば、大歓迎です!

<style>
li {
    height: 40px;
    background: #999;
}
</style>
<div style="-webkit-overflow-scrolling: touch; height: 400px; background: #CCC; width: 400px; overflow: scroll;" >
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
</ul>
</div>
<div id="content"></div>
<script>
var elements = document.getElementsByTagName('li');
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].ontouchstart = function (e) {
        document.getElementById('content').innerHTML = document.getElementById('content').innerHTML+this.innerHTML;
    }
}
</script>
4

2 に答える 2

0

私のプロジェクトでも、モメンタムスクロールがかなりバグがあるのを見てきました。このようなバグは、スクローラー内の要素をハードウェアで高速化することによって修正されることがあります。それを試して、それがうまくいくかどうかを確認してください。要素をハードウェア アクセラレートする方法の詳細は次のとおりです: http://davidwalsh.name/translate3d

于 2013-08-09T06:15:31.743 に答える
0

これを投稿してからほぼ 3 年後ですが、この問題に対処する方法を次に示します。まず、モーメンタム スクロールを制御しようとしないでください。デバイスがモーメンタム スクロール (200ms) に入ると、デバイスはタッチ イベントを webview に送信しなくなります。

このコードは、touchstartevent が発生すると touchend イベントをアタッチし、150ms で削除するため、「タップ」は 150ms 以内に発生する必要があります。

element.addEventListener('touchstart', function(e)) {
    var target = this;
    var handler = function(evt) {
        e.preventDefault();
        e.stopImmediatePropagation();
        evt.preventDefault();
        evt.stopImmediatePropagation();
        /*
         Your tap event handler code here
         */
    };
    target.addEventListner('touchend', handler);
    setTimeout(function() {
        target.removeEventListener('touchend', handler)
    }, 150);
});

お役に立てれば ：）

于 2015-11-03T10:28:27.120 に答える