chat scroll to bottom like the console

html/chat.html

@@ -1,6 +1,14 @@
 <div ng-controller="ChatController" id="ChatController">
 
-    <div id="vertical-container" style="height: 600px" class="Output scrollable"><div ng-repeat="line in Output" ng-class="line.Class"><span class="chatname"><a href="#/{{address}}/player/{{line.UserId}}/" style="color: {{line.Color}}">{{line.Username}}</a>:</span>  {{line.Message}}</div></div>
+    <div style="height: 600px" class="Output scrollable">
+    	<div ng-repeat="line in Output" ng-class="line.Class">
+    		<span class="chatname">
+    			<a href="#/{{address}}/player/{{line.UserId}}/" style="color: {{line.Color}}">
+    				{{line.Username}}
+    			</a>:
+    		</span> {{line.Message}}
+    	</div>
+    </div>
 
 	<form ng-submit="SubmitCommand()" class="md-inline-form">
 			<div>

js/chat.js

@@ -3,7 +3,7 @@ app.controller( 'ChatController', ChatController );
 
 function ChatController( $scope, rconService, $timeout )
 {
-	$scope.Output = new Array();
+	$scope.Output = [];
 
 	$scope.SubmitCommand = function ()
 	{
@@ -13,7 +13,7 @@ function ChatController( $scope, rconService, $timeout )
 
 	$scope.$on( "OnMessage", function ( event, msg )
 	{
-		if ( msg.Type != "Chat" ) return;
+		if ( msg.Type !== "Chat" ) return;
 
 		$scope.OnMessage( JSON.parse( msg.Message ) );
 	});
@@ -21,13 +21,40 @@ function ChatController( $scope, rconService, $timeout )
 	$scope.OnMessage = function( msg )
 	{
 		$scope.Output.push( msg );
-		$timeout( $scope.ScrollToBottom, 50 );
+		
+		if($scope.isOnBottom()) {
+			$scope.ScrollToBottom();
+		}
 	}
 
 	$scope.ScrollToBottom = function()
 	{
-		// TODO - don't scroll if we're not at the bottom !
+		var element = $( "#ChatController .Output" );
-		$( "#ChatController .Output" ).scrollTop( $( "#ChatController .Output" )[0].scrollHeight );
+
+		$timeout( function() {
+			element.scrollTop( element.prop('scrollHeight') );
+		}, 50 );
+	}
+
+	$scope.isOnBottom = function()
+	{
+		// get jquery element
+		var element = $( "#ChatController .Output" );
+
+		// height of the element
+		var height = element.height();
+
+		// scroll position from top position
+		var scrollTop = element.scrollTop();
+
+		//  full height of the element
+		var scrollHeight = element.prop('scrollHeight');
+
+		if((scrollTop + height) > (scrollHeight - 10)) {
+			return true;
+		}
+
+		return false;
 	}
 
 	//
@@ -36,13 +63,15 @@ function ChatController( $scope, rconService, $timeout )
 	//
 	$scope.GetHistory = function ()
 	{
-		console.log( "GetHistory" );
-
 		rconService.Request( "chat.tail 512", $scope, function ( msg )
 		{
 			var messages = JSON.parse( msg.Message );
 
-			messages.forEach( function ( x ) { $scope.OnMessage( x ); } );
+			messages.forEach( function ( message ) {
+			 $scope.OnMessage( message ); 
+			});
+
+			$scope.ScrollToBottom();
 		} );
 	}