овляю заголовок таблицы и позиции первого столбца программно, основываясь на том, как пользователь прокручивает их, чтобы сохранить их выравнивание.

Проблема, с которой я сталкиваюсь, заключается в том, что как только мои наборы данных становятся достаточно большими, прокрутка становится все более изменчивой / менее плавной.

Соответствующий код находится в самом низу скрипки:

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'});
});

Я знаю, что это можно написать гораздо более эффективно, кэшируя элементы и так далее. Например, я попытался сохранить элементы в массиве и обновить их положение более «ванильно»:

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

Независимо от того, как быстро я делаю обратный вызов, я все равно не доволен результатом. У вас есть какие-нибудь предложения?

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