Move row from bottom of table to top on touchmove
<p>I'm using touch events to handle swiping a table containing roughly 350 rows. The number of rows is variable as they are pulled from a Google Spreadsheet. The table auto-scrolls continuously, which means that when a rows scrolls off at the top or bottom, I have to append or prepend it again as the case may be.</p>

<p>The user can touch the screen to swipe the table up or down (note that I'm not talking about mobile devices here, but rather a touch-screen monitor). I've provided an implementation for the <em>touchmove</em> event when swiping down, though swiping up would be similar:</p>

<pre><code>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 &lt; 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)) &gt;= $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;
}
</code></pre>

<p>The problem is that the more rows that are in the table, the more sluggish the code becomes for moving the row from the bottom to the top and adjusting the margin, causing a jittery swipe.</p>

<p>I'm guessing this is an expensive operation to perform. I read up on browser reflow, but I didn't see many optimizations that I could make to my code. Even tried introducing a <em>DocumentFragment</em> to no avail.</p>

<p>Any ideas on things I can try? Or am I going to have to live with this?</p>

<p>Thx.</p>
