Using onScreen to power infinite scrolling
A while ago I wrote a really simple jQuery plugin called onScreen that adds a selector to filter out elements that are currently visible on the screen. Here’s a quick snippet of jQuery that uses it to help power infinite scrolling.
$(function() {
function loadMorePosts(post_id) {
var path = "/posts?offset=" + post_id
if (history.pushState) history.pushState({}, null, path)
$.ajax(path)
}
// Every second check if the last post is on-screen, if it is
// then load the next chunk of posts.
setTimeout(function() {
var post = $(".post:last:onScreen")
if (post.length) loadMorePosts(post.data("id"))
}, 1000)
})