We want to figure out if the scrollTop plus the clientHeight is greater than or equal to the scrollHeight. If it is, then we want to go ahead and scroll the user to the bottom because we know they're already near the bottom, if (clientHeight + scrollTop is >= scrollHeight):
var scrollHeight = message.prop('scrollHeight');
if (clientHeight + scrollTop >= scrollHeight) {
}
Now if this is the case then, we are going to go ahead and do something. For now, we'll just use console.log to print a little message to the screen. We'll just print Should scroll:
if (clientHeight + scrollTop >= scrollHeight) {
console.log('Should scroll');
}
Now our calculation is not quite complete, since we are running this function. After we append the new message, we do need to take that into account also. As we saw over inside Atom, if we can see that last message, we do want to scroll them to the bottom; if I'm further up the list we won't scroll them. But if I'm pretty close to the bottom, a few pixels up previous, we should scroll them to the bottom because that's most likely what they want.