Estou atualizando um cabeçalho da tabela e suas posições de primeira coluna programaticamente com base em como o usuário rola para mantê-los alinhados.

O problema que estou enfrentando é que, assim que meus conjuntos de dados ficam grandes o suficiente, a rolagem fica cada vez mais instável / menos suave.

O código relevante está na parte inferior do violino:

iScroll.on('scroll', function(){
    var pos = $('#scroller').position();
    $('#pos').text('pos.left=' + pos.left + ' pos.top=' + pos.top);

    // code to hold first row and first column
    $('#scroller th:nth-child(1)').css({top: (-pos.top), left: (-pos.left), position:'relative'});
    $('#scroller th:nth-child(n+1)').css({top: (-pos.top), position:'relative'});

    // this seems to be the most expensive operation:
    $('#scroller td:nth-child(1)').css({left: (-pos.left), position:'relative'});
});

Eu sei que isso pode ser escrito muito mais eficaz, armazenando em cache os elementos e assim por diante. Por exemplo, tentei salvar os elementos em uma matriz e atualizar sua posição de uma maneira mais "baunilha":

headerElements[i].style.left = left + 'px'; // etc...

Não importa a rapidez com que efetue o retorno de chamada, ainda não estou feliz com o resultado. Você tem alguma sugestão?

https://jsfiddle.net/0qv1kjac/16/