Code: Select all
var cm_id = document.getElementById('scroll_id'); var cm_scroll = cm_id.scrollHeight; var cm_client = cm_id.clientHeight; var cm_difference = cm_scroll - cm_client; var cm_top = cm_id.scrollTop; if (cm_difference == cm_top) {var scroll = '1';} if (cm_difference == cm_top) {cm_id.scrollTop = cm_id.scrollHeight;}Then you need to subtract the clientHeight from the scrollHeight which gives you the difference.
Any way if you look at the code this essentially is a dynamic way of scrolling regardless of the height of the overflow element, even if you resize it in say Webkit with the CSS3 resize property.
Another reason it's written this way is so that if your scrollbar is at the bottom of the overflow element it will automatically continue to scroll to the bottom when you AJAX to check for new messages.
However if your scrollbar is not at the bottom then we must presume (for the sake of technical design) that the visitor is reading older messages. It would be rude for us to automatically scroll each time we check for new messages!
Any way I have not yet implemented a work around for IE though I do know what I'm likely to try first. I currently have JavaScript use setTimeout with a number (representing the id of the last message's divisible element) so it increments each time. Any way IE won't automatically scroll by default unless you manually scroll down though it will scroll once the element gains overflow and you manually scroll to the bottom. So the trick is to determine the height of each chat div up until it matches the clientHeight of the overflow element. Once it reaches that you'll want to have a special function (or part of your script) automatically scroll that one time (only). It's obnoxious as hell and it's necessary for even IE8!
...and my latest project is an AJAX chat room too.