CODEWITHSUNDEEP
javascriptcssscrollbarchat
tomericco
tomericco

Reputation: 1584

How to set a default location of a scrollbar

in my web page there is a chat window. When the chat's log is filled out, the user uses scrollbar in order to navigate between messages. I want my chat frame to present always the last message that is located at the bottom. How can I do this using CSS, JavaScript?

Thanks, Tomer

Upvotes: 1

Views: 896

Answers (3)

Pablo
Pablo

Reputation: 6058

Even thou is not a tag on your question here is a jQuery solution i use for my chat web app:

//Where chat_message_tray is the scrollable div in your chat
function chat_scroll(chat_messages_tray){
   var scroll_amount = $(chat_messages_tray).attr("scrollHeight") -  $(chat_messages_tray).height();

   $(chat_messages_tray).animate({ scrollTop: scroll_amount}, 500);
}

Upvotes: 1

walkingTarget
walkingTarget

Reputation: 408

http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html

3rd result from Google - 'div scrollbar bottom'

Upvotes: 1

Pointy
Pointy

Reputation: 413747

DOM elements (the good ones, anyway) support a method called scrollIntoView(). If you have a reference to the DOM element corresponding to the last chat entry (a <div> or whatever) you can use scrollIntoView() to tell the browser that its surrounding content should be scrolled in order to make the <div> visible.

Now, with some complicated (or not-so-complicated, maybe; perhaps just unlucky) page layouts, I've had to contend with Internet Explorer wanting to scroll the wrong thing, or just do something weird to the page. The nature of a thing like scrollIntoView() is such that you're letting the browser decide exactly how it wants to do that scrolling. Generally, with fairly simple content in a simple scrolling container (one with "overflow: auto" and a fixed height, basically), it does work however.

Upvotes: 1

Related Questions