javascript - touchmoveで行をテーブルの下から上に移動します

Question

タッチイベントを使用して、約350行を含むテーブルのスワイプを処理しています。行数は、Googleスプレッドシートから取得されるため可変です。テーブルは継続的に自動スクロールします。つまり、行が上または下でスクロールオフする場合、場合によっては、行を追加または追加し直す必要があります。

ユーザーは画面をタッチしてテーブルを上下にスワイプできます（ここではモバイルデバイスについてではなく、タッチスクリーンモニターについて説明していることに注意してください）。下にスワイプするときのtouchmoveイベントの実装を提供しましたが、上にスワイプするのも同様です。

function handleMove(event) {
    var touch, newY, delta,
        $firstItem = $(".item:first"),
        $lastItem = $(".item:last");

    if (!isDown) {
        return;
    }

    if (event.originalEvent.targetTouches.length == 1) {
        touch = event.originalEvent.targetTouches[0];
        newY = touch.clientY;
    }

    delta = lastY - newY;

    if (delta < 0) {    //Swiping down  
        //Move last row from the end of the table to the beginning if first row is fully visible.
        if (($firstItem.position().top + $firstItem.outerHeight(true)) >= $page.position().top) {
            $page.css("margin-top", parseInt($page.css("margin-top")) - $lastItem.outerHeight(true) + "px").prepend($lastItem);
        }

        $page.css("margin-top", parseInt($page.css("margin-top")) - delta + "px");
    }

    lastY = newY;
}

問題は、テーブル内の行が多いほど、行を下から上に移動してマージンを調整するためのコードが遅くなり、スワイプが不安定になることです。

これは実行するのに費用のかかる操作だと思います。ブラウザのリフローについて読みましたが、コードに加えることができる最適化はあまり見られませんでした。DocumentFragmentを導入しようとしても無駄になりました。

私が試すことができることについて何かアイデアはありますか？それとも私はこれと一緒に暮らす必要がありますか？

どうも。