Question

My question is pretty much as the title suggests, I have a message board which constantly expands and pushes messages down when new ones are added. I want to be able to lock the scroll to a message for example so the page scroll bar moves when the message board extends to keep the same view of messages that you had initially. Is this possible with jquery? Any advice appreciated.

Answer 1

You’ll need to register a callback or event handler that gets triggered whenever the content on the page changes.

The you’ll need a scroll-to function. Check out http://demos.flesler.com/jquery/scrollTo/.

...
// Insert this code where you are adding the message to the page
// New message, trigger the custom event callback
// Assumes 'message' is a jQuery object for the new message.
message.trigger('scroll-to-message');
...

jQuery(function() {
  // Bind a handler for all messages (which should have a class 'message')
  // with a custom event name
  jQuery(document).delegate('.message', 'scroll-to-message', function() {
    var message = jQuery(this);
    jQuery.scrollTo(message);
  });
});