Ben Pickles. Saying stuff about stuff.

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)
})

Posted on

Tweet