0

我正在使用触摸事件来处理滑动包含大约 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无济于事。

关于我可以尝试的事情有什么想法吗？或者我将不得不忍受这个？

谢谢。

4

0 回答 0