Have a look at Facebook’s message module. When you’re looking at a conversation you see a list of messages contained in a div. The list is “scrolled down to the last message” when you load the page. Scrolling up (using your scrollbar to the right) takes you upwards in the list, showing you older messages.
Trying to dissect this from the code isn’t an easy task, at least not for me, but I have noticed that the header containing the name of the person you’re talking with and some buttons has the style position:fixed.
If someone could provide some insight as to how this feature is done or provide links to a tutorial/explanation of it I’d be very happy.
Thanks
I haven’t had a look at their code however the simplest answer I can think of is that the main page container is set with
position: fixed;and the message section is simply positioned as a normal element on the page.This would give the illusion that the scroll bar only scrolls the message portion when infact the page is scrolling as normal, just with the container staying in place.