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?

Croquet

Don't know what facebook uses, but check this: infinite-scroll.com – Floatplane

@Floatplane They probably created their own just like they created their own javascript library. – Lunation

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.

Lunation

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.

Royster

What is the event that fires the request? – Chemmy

I think you meant "also known colloquially as AJAX". JSON may or may not be used as the data format that is being transmitted by an XHR/AJAX, but is not the same. – Lamere

@Steve: oops, thanks, I knew something was wrong when I typed that. – Royster

@Royster Yeah, I figured. :) I would delete my comment now, if I could. – Lamere

@VitalijZadneprovskij: either an OnScroll event, or if you're faking scrolling, then whatever callback you are using to fake scrolling. – Royster