Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Robert Walker
Robert Walker
17,146 Points
Posted by Robert Walker
Robert Walker
17,146 Points

Chat app and animated scroll bars

I have a chat app I am building using Socket.io and Node.js.

Inside the chat I have a div with a form element for submitting new messages and another div for the display area.

<div id="chatBox"> <div id="chatWindow"> <ul id="messages"></ul> </div> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> </div>

Once the messages pass the current chat window size I use the below code to animate the scroll bar and make sure the user is seeing the last message posted without having to scroll, normal chat feature.

socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
   $('#chatWindow').animate({scrollTop: $('#chatWindow').prop("scrollHeight")}, 500);
  });

The problem I now have is if I manually scroll up to read something the animation runs the moment another message is posted, forcing me back down to the last message, while this is working correctly it means trying to read past messages up the page becomes impossible.

I know how to fix this in theroy but im not sure how to fix it in code.

If a user moves the scroll bar from the very bottom, stop the animation, once the scroll bar is returned to the very bottom again continue with the animate on append as normal.

socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));

//== If scroll bar moves from the very bottom, stop animation
              // code
//== if scroll bar is returned to the very bottom continue with animation on message append function.

   $('#chatWindow').animate({scrollTop: $('#chatWindow').prop("scrollHeight")}, 500);
  });

2 Answers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

See comment below

You can set it to only run the animation if you are at the bottom of the chat window:

var $chat = $('#chatWindow');

$chat.on("scroll", function() {

var $chatHeight = $chat.height();

var $chatPosition = $chat.height() + $chat.scrollTop();

//If scroll position of is at the bottom, then automatically scroll

if (($chatHeight - $chatPosition ) / $chatHeight === 0) {

// Add your code to automatically scroll

$chat.animate({scrollTop: $('#chatWindow').prop("scrollHeight")}, 500); }});

Robert Walker
Robert Walker
17,146 Points
Robert Walker
Robert Walker
17,146 Points

Thank you for the reply, sadly that wont work because every time the server sends back a message I need it to auto scroll the page down so users always see the latest message, however if the scroll bar is not at the very bottom we can assume the user has moved it and should stop the animation from taking place.

So I need more of a way to check the current position of the scroll bar at the point a new message is sent, if the scroll bars current position is not at the very bottom, do not animate, if it is animate as normal.

Robert Walker
Robert Walker
17,146 Points
Robert Walker
Robert Walker
17,146 Points

Sorry I should of explained it better of why it is not working correctly.

yes it works in some respects, it will allow the animation to go fine while the scroll bar is at the very bottom but once you move the scroll bar and then return it to the bottom the animation wont work and the bar will not "auto" scroll like it had done before.

EDIT: ive just checked and if I scroll right to the top and a message comes it will animate again, is there something I need to reverse that effect?

EDIT2: sorry no that doesn't actually work either, once placing the scroll bar at the very top, on the next message appended it will scroll to the very bottom but then the animation stops working again.

Colin Bell
Colin Bell
29,679 Points

I edited the standard "get bottom of the document function" too hastily. What about something like this?

var $chat = $('#chatWindow');
var bottom = true;

$chat.bind('scroll', function () {
  var $scrollTop = $(this).scrollTop();
  var $innerHeight = $(this).innerHeight();
  var $scrollHeight = this.scrollHeight;

  // If scrolled to the bottom, set global var bottom equal to true
  if ($scrollTop + $innerHeight >= $scrollHeight) {
    bottom = true;
  } 
  // If not scrolled to the bottom, set global var bottom equal to false
  else {
    bottom = false;
  }
})

So your code might look something like this:

var $chat = $('#chatWindow');
var bottom = true;

$chat.bind('scroll', function () {
  var $scrollTop = $(this).scrollTop();
  var $innerHeight = $(this).innerHeight();
  var $scrollHeight = this.scrollHeight;
  bottom = $scrollTop + $innerHeight >= $scrollHeight ? true : false;
});

socket.on('chat message', function(msg){
  // Will always append new messages, regardless of bottom
  $('#messages').append($('<li>').text(msg));
  if (bottom) {
    // Only animate to bottom on 'chat message' if bottom = true
    $chat.animate({scrollTop: $chat.prop("scrollHeight")}, 500);
  }
}
Robert Walker
Robert Walker
17,146 Points
Robert Walker
Robert Walker
17,146 Points

That doesn't work either ive fiddled around with it a lot too trying to get it to work but it always boils down to it not animating again once the scroll bar is moved.