How does Facebook achieve infinite scrolling?

Question

My first question is how do they get this scroll bar?

http://dl.dropbox.com/u/12337149/scrollbar.png

I have seen it in a few places so I presume it might be in a public library? My second question relates to the infinite scrolling itself. Once again I have seen it on a few sites so is it a technique that is relatively common and is described somewhere?

Answer 1

Do you mean the "lazy load" effect like on Twitter (when you scroll, it loads more when you reach the bottom)? They use AJAX (Asynchronous JavaScript and XML) and measure when you reach the bottom and load more data. But they use JSON since it is easier to most people than XML (but it is still called AJAX).

There is a jQuery plugin for that called Infinite Scroll.

Also for the scroll bar thing, those are like Mac OS X Lion's scrollbar (which is most likely where they got the idea from), here's another Stack Overflow post about it.

I hope this helps give you some information about this stuff.

And by the way if you don't know what jQuery is, it is an awesome library for JavaScript and makes everything faster to code in JavaScript. You should check it out at jQuery.com if you never used it/heard of it.

Answer 2

AJAX (often implemented with the XmlHttpRequest primitive; actually using the JSON format instead of Xml) is the act of making a server request in javascript without reloading the page, and registering a callback to handle the response. When the response arrives, the callback is invoked with the data, like a page fetch, but without reloading the page.