A lot of websites use infinite scroll including Facebook&Twitter. There are a lot of Ruby Gems that help in implementing this but it’s rather simple to create your own with Javascript and avoid adding another gem to your app.

Let’s say we have a ul with a id of videos, inside this there are a lot of li tags that contain title’s of videos.

1
2
3
4
5
6
7
8

<ul id="videos">
  <li class="video">YouTube Video 1</li>
  <li class="video">YouTube Video 2</li>
  <li class="video">YouTube Video 3</li>
  <li class="video">YouTube Video 4</li>
  <li class="video">YouTube Video 5</li>
  <!-- more videos -->
</ul>

We want to detect when a user hit’s the bottom of these videos and make a call to grab more videos.

1
2
3
4
5
6

checkVideoScroll = (e) ->
  element = $(e.currentTarget())
  if element[0].scrollHeight - element.scrollTop() == element.outerHeight()
    #make call to get more videos
$ ->
  $(".videos").on("scroll", checkVideoScroll)

When the document loads we set a scroll listener on the list of videos. When a user scrolls down, we call the checkVideoScroll method. On the first line the method assigns element to be the current target, which in this case is the ul. The scrollHeight is the height of the element including content not visible on the screen. The scrollTop() gets the scroll top offset of the element. The outerHeight() is a jQuery method that returns the visible portion of the scrollable element.

As you can see once the user scrolls all the way to the bottom, scrollHeight - scrollTop() will equal the outerHeight() and that’s when we make a call to get more videos.

As you can see infinite scroll is simple with jQuery.