Infinite scroll

  • Hi! I’m noticing a bug when you place infinite scroll in scroll mode (rather than click), all the elements seem to be appended to the top of the page when they load, before they jummp down into the correct position. This causes a lot of ‘jumpy’ issues in a mobile screen. Has anyone been able to solve this in an elegant way?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter nsoltan

    (@nsoltan)

    I believe the culprit code is somewhere in here:

    // When Jetpack Infinite scroll posts have loaded
	$( document.body ).on( 'post-load', function () {

		var $container = $('.posts');
		$container.masonry( 'reloadItems' );

		$blocks.imagesLoaded(function(){
			$blocks.masonry({
				itemSelector: '.post-container'
			});

			// Fade blocks in after images are ready (prevents jumping and re-rendering)
			$(".post-container").fadeIn();
		});

    Thread Starter nsoltan

    (@nsoltan)

    The original implementation seems to bug out when reaching many items (i.e like page 4-5 on my website).

    I tried replacing as such:

    // When Jetpack Infinite scroll posts have loaded
	$( document.body ).on( 'post-load', function () {

		var $container = $('.posts');
		//Edited:
$container.masonry( 'appended', $container, isAnimatedFromBottom )

		$blocks.imagesLoaded(function(){
			$blocks.masonry({
				itemSelector: '.post-container'
			});

			// Fade blocks in after images are ready (prevents jumping and re-rendering)
			$(".post-container").fadeIn();
		});

    as per: https://desandro.github.io/masonry/docs/methods.html

    But then it only loads one column leaving the other rows untouched..

    Thread Starter nsoltan

    (@nsoltan)

    Tried out changing the on-post-load to change the original $blocks, still no desired effect.

    // When Jetpack Infinite scroll posts have loaded
	$( document.body ).on( 'post-load', function () {

		var $container = $('.posts');
		//Edited:
$blocks.masonry( 'appended', $container, isAnimatedFromBottom )

		$blocks.imagesLoaded(function(){
			$blocks.masonry({
				itemSelector: '.post-container'
			});

			// Fade blocks in after images are ready (prevents jumping and re-rendering)
			$(".post-container").fadeIn();
		});
    Thread Starter nsoltan

    (@nsoltan)

    Still no luck ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Infinite scroll’ is closed to new replies.