scrolling

in Company news

Continous scrolling

We’ve just finished implementing a feature that does just that: continuous scrolling. Now, instead of laboriously navigating from page to page, the search results appear instantly as you scroll down.

On iconfinder.com most of your time is undoubtely spent searching for the very best icons for where ever your inspiration takes you: whether it’s building a web startup, coding a mobile app, or designing a personal blog. And the search functionality should respond accordingly: quickly and seamlessly bringing you the exact icons you’re looking for.

Our Wish List

  • Fast
  • No adverse effects on the SEO.
  • Pluggable architecture: removal of any functionality shouldn’t adversely affect any other subsystem.
  • Scrolling should be smooth not jerky.
  • Preserve user’s state when browsing from search results to icon details.
  • Did we mention fast?

Under the Hood

Under the hood, a lot of intricate stuff is going on.

First, we determine how many icons match your search term(s). We then use this number to pre-generate a div that will eventually house all the icons as you scroll down the page. This pattern results in smoother scrolling instead of the jerky scroll bar (due to an ever expanding div) you might have noticed on websites that don’t use this technique.

Next, we display the first “page” of results. When the user scrolls to the last row, we automatically load the next “page.” This continues until there are no more results to show, at which point, the user will see the [little icon symbol].

The meat of the code is in a nifty jQuery plugin called waypoints.js. You attach a “waypoint” to any element on the page, and when you scroll past this element, this waypoint triggers your callback code.

Here’s a little snippet of code showing this in action:

 

First, we attach a waypoint to a div whose id is “infscr-finished.” This div occurs right after the currently displayed icons on the page. Once the div is triggered, we show the spinner and fetch the next page of icons.

History is preserved as well. Clicking on a particular icon will take the user to the detail page, and clicking the back button will put the user exactly where they were previously.

What do you think?

We firmly believe this approach results in richer user experience all around. We value your feedback, so let us know what you think in the comments below!

Write a Comment

Comment

    • If you disable JS you’ll see that the old-school pages are still in the HTML. The cont. scrolling is made simply by adding a layer of JS on top of it. So there’s is basically no difference from Google’s point of view.