Using ScrollMagic and a response fragment for infinite scroll

[csdude55]

Still in the search for a good way to create an infinite scroll that works well on desktop and mobile, now I've found ScrollMagic:

[scrollmagic.io...]

Their sample worked well on my desktop and my mobile, so that's a good start!

Here is the sample they have:

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>

<div id="content">
<div class="box1" style="background-color: rgb(243, 220, 59);"></div>
<div class="box1" style="background-color: rgb(198, 204, 43);"></div>
<div class="box1" style="background-color: rgb(219, 49, 253);"></div>
<div class="box1" style="background-color: rgb(166, 142, 42);"></div>
<div class="box1" style="background-color: rgb(8, 49, 109);"></div>
<div class="box1" style="background-color: rgb(82, 156, 122);"></div>
<div class="box1" style="background-color: rgb(163, 201, 61);"></div>
<div class="box1" style="background-color: rgb(145, 104, 250);"></div>
<div class="box1" style="background-color: rgb(215, 175, 157);"></div>
<div class="box1" style="background-color: rgb(142, 58, 30);"></div>
<div class="box1" style="background-color: rgb(132, 133, 74);"></div>
<div class="box1" style="background-color: rgb(148, 231, 202);"></div>
<div class="box1" style="background-color: rgb(243, 170, 161);"></div>
<div class="box1" style="background-color: rgb(83, 234, 97);"></div>
<div class="box1" style="background-color: rgb(27, 107, 200);"></div>
<div class="box1" style="background-color: rgb(136, 26, 108);"></div>
<div class="box1" style="background-color: rgb(77, 142, 29);"></div>
<div class="box1" style="background-color: rgb(231, 10, 61);"></div>
</div>

<div id="loader">
<img src="../../img/example_loading.gif">
LOADING...
</div>

<script>
// init controller
var controller = new ScrollMagic.Controller();

// build scene
var scene = new ScrollMagic.Scene({triggerElement: ".dynamicContent #loader", triggerHook: "onEnter"})
.addTo(controller)
.on("enter", function (e) {
if (!$("#loader").hasClass("active")) {
$("#loader").addClass("active");
if (console){
console.log("loading new items");
}
// simulate ajax call to add content using the function below
setTimeout(addBoxes, 1000, 9);
}
});

// pseudo function to add new content. In real life it would be done through an ajax request.
function addBoxes (amount) {
for (i=1; i<=amount; i++) {
var randomColor = '#'+('00000'+(Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
$("<div></div>")
.addClass("box1")
.css("background-color", randomColor)
.appendTo(".dynamicContent #content");
}
// "loading" done -> revert to normal state
scene.update(); // make sure the scene gets the new start position
$("#loader").removeClass("active");
}

// add some boxes to start with.
addBoxes(18);
</script>

My content is generated via PHP, though, instead of Javascript, so I'm trying to modify it to use a response fragment via Ajax:

<div id="classifiedList">
 <div id="itemList">
// PHP generated content
 <a class="next" href="$next_link" style="display: none">next</a>
 </div>

 <div id="loader"><script>document.write(loading);</script></div>
</div>

<script>
var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({triggerElement: "#loader", triggerHook: "onEnter"})
 .addTo(controller)
 .on("enter", function(e) {
 if (!$("#loader").hasClass("active")) {
 $("#loader").addClass("active");

 if (console)
 console.log("loading new items");

 // Ajax to load response fragment
 setTimeout(loadMore(), 1000);
 }
});

function loadMore() {
 // for testing
 alert($('.next:last').attr('href'));

//// This doesn't work
// $('#classifiedList').load($('.next:last').attr('href') + ' #itemList')
// .appendTo("#classifiedList");

//// This works
 $('#classifiedList').append($('<div></div>')
 .load($('.next:last').attr('href') + ' #itemList'));

 scene.update();
 $("#loader").removeClass("active");
}
</script>

It's partly working, but not quite. When I scroll down to the bottom, the "loading" variable shows and the alert() is prompted, then new #itemList on $nextlink does append. But it appends AFTER "loading", so "loading" doesn't go away like I want.

Then, when I scroll to the bottom a second time, nothing happens. The "loading" variable doesn't show and the alert() doesn't prompt again. And I expected it to load the 3rd page, but it doesn't do anything. It's as if I've reached the end of the list, when I haven't.

I tried moving things in and out of the PHP loop, but so far nothing I've tried had any impact.

Any guess where I'm messing up?

[csdude55]

Nevermind! :-) You guys probably can't tell, but I edited that a few times as I kept getting closer to the solution. In the end, all that was left was moving "loading" and the entire script outside of the DIV altogether.

I'm not sure why appendTo() (from the example) caused it to overwrite #itemList instead of appending (even when I coded it like I did in the append() line), but it doesn't matter because append() works just fine.

Maybe this can help someone else! Getting a functioning infinite scroll system has been a real pain! However, I do have to point out that it's still not really search-engine friendly, so this might not be the final "perfect" solution for me.