Content flicker/jump on infinite scroll/loop
html, infinite-scroll, javascript, jquery
Solution
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.
Problem
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); ```