CODEWITHSUNDEEP
javascripthtmlcss
usercode
usercode

Reputation: 309

Custom Chat box Scrollbar display always bottom

I have a custom chat box. I added overflow-y to scroll. Now whenever I write something in the text box, it appears in the scrollbar window. How can I make the scrollbar window show the last message which I write, in my case it always shows the top.

Upvotes: 1

Views: 2295

Answers (1)

mastazi
mastazi

Reputation: 1672

In Javascript you could try, assuming your div has the id "scrolling"

document.getElementById("scrolling").scrollTop = document.getElementById("scrolling").scrollHeight;

Where scrollTop is the number of pixels the object is scrolled and scrollHeigth is the total heigth of the content of the element including the content that is not visible due to overflow.

Important:

the above code should be executed every time that a new message appears in the chatbox, to do so it should be located in the right place into your script.

Source:

https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop

https://developer.mozilla.org/en-US/docs/DOM/element.scrollHeight

Another solution:

Maybe you could also do it by having an anchor (#idOfLastMessage) for the message, then using an iframe, instead of a div, which is pointing to www.yoursite.com/url-of-the-message-list#idOfLastMessage

Upvotes: 1

Related Questions