Content flicker/jump on infinite scroll/loop

I am looking for help / a point in the right direction / or a solution for a flicker/jump, when scrolling on a looping/infinite website, which can be seen in this fiddle.

What seems to be causing the jump is:

“$(window).scrollTop(half_way - child_height);“, and what could also be a Chrome windows scrollTop bug, but it is happening in all browsers at the moment.

If I remove “- child_height” there is no longer a flicker but the page no longer scrolls correctly, which can be seen in this fiddle.

Also, on the very first scroll the right hand column jumps up by three boxes – also because of ‘half_way‘, which I can fix by giving it a “bottom: -600px;“

The full code:

http://jsfiddle.net/djsbaker/j3d8r/1/

var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);

function crisscross() {
    $('#up-left').css('bottom', '-' + window.scrollY + 'px');
    $('#down-right').css('bottom', '-' + window.scrollY + 'px');
    var firstLeft = $('#up-left').children().first();
    var lastLeft = $('#up-left').children().last();
    var lastRight = $('#down-right').children().last();
    var firstRight = $('#down-right').children().first();

    if (window.scrollY > half_way ) {

        $(window).scrollTop(half_way - child_height);
        lastRight.appendTo('#up-left');
        firstLeft.prependTo('#down-right');

    } else if (window.scrollY < half_way - child_height) {

        $(window).scrollTop(half_way);
        lastLeft.appendTo('#down-right');
        firstRight.prependTo('#up-left');
    }
}

$(window).scroll(crisscross);

Answer

Okay – here is a ‘working’ version – and by works I mean it less flickery than before. I thought it was flicker free, and it was when I was on battery power, but plugged into the mains and the CPU is fast enough to get flicker.

As I mentioned, to get rid of the flicker you need to clone the objects, manipulate them and then replace them into the DOM, rather than just manipulating the DOM directly.

I did this by getting the contents of <div id="content"> manipulating them and then replacing them into that <div>.

Also, it’s a good idea to only find things in the DOM once, and from then on use a reference to that object rather than searching repeatedly. e.g.

var leftSide = $(clone).find('.up-left');
....
lastRight.appendTo(leftSide);
....
 $(leftSide).css('bottom', '-' + window.scrollY + 'px');

rather than:

lastRight.appendTo('#up-left');
$('#up-left').css('bottom', '-' + window.scrollY + 'px');

Searching the DOM is relatively slow, and so storing references can improve performance/reduce flicker.

Storing the object also makes the code easier to understand (imho) as you can easily see that you’re referencing the same thing, rather than possibly different things.