Scroll to Bottom in Chat Box in Angularjs

Scroll to bottom in chat box in angularjs

You can create a directive for this:

.directive('scrollBottom', function () {
  return {
    scope: {
      scrollBottom: "="
    },
    link: function (scope, element) {
      scope.$watchCollection('scrollBottom', function (newValue) {
        if (newValue)
        {
          $(element).scrollTop($(element)[0].scrollHeight);
        }
      });
    }
  }
})

http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=preview

BTW: avoid DOM manipulation inside controllers (use directives instead).

Angularjs : Scroll to bottom of div

Move the scroll-to-bottom directive to the md-content element

 <!-- MOVE directive here -->
 <md-content ͟s͟c͟r͟o͟l͟l͟-͟t͟o͟-͟b͟o͟t͟t͟o͟m͟=͟"͟c͟t͟r͟l͟.͟m͟e͟s͟s͟a͟g͟e͟s͟"͟ layout="column"
             style="background-color: #F5F5F5;" 
             ng-style="{'height':ctrl.messageWindowHeight}">
      <div class="chat-box">
        <!-- NOT HERE -->
        <ol class="discussion" ̶s̶c̶r̶o̶l̶l̶-̶t̶o̶-̶b̶o̶t̶t̶o̶m̶=̶"̶c̶t̶r̶l̶.̶m̶e̶s̶s̶a̶g̶e̶s̶"̶ >
          <li ng-repeat="message in ctrl.messages track by $index" id="msg-{{$index}}">
            {{message}}
          </li>
        </ol>
      </div>
  </md-content>

The scroll-to-bottom directive needs to operate on the element that is actually scrolling. The element that is scrolling is the <md-content> element because its height is restricted by the CSS created by its ng-style directive. The <ol> element is not scrolling and its scrollHeight property is constant.

The DEMO

var app=angular.module('myApp', ['ngMaterial'] );
app.controller('ChatCtrl', function($window, $anchorScroll){
  var self = this;
  self.messageWindowHeight = parseInt($window.innerHeight - 170) + 'px';
  self.messages = [];
  for(var i = 1 ; i<=200;i ++){
    self.messages.push(i);
  }
  
  self.user = { text : ""};
  self.send = function(){
    self.messages.push(angular.copy(self.user.text));
    self.user.text = "";
  }
});

app.directive('scrollToBottom', function($timeout, $window) {
    return {
        scope: {
            scrollToBottom: "="
        },
        restrict: 'A',
        link: function(scope, element, attr) {
            scope.$watchCollection('scrollToBottom', function(newVal) {
                if (newVal) {
                    $timeout(function() {
                        element[0].scrollTop =  element[0].scrollHeight;
                    }, 0);
                }

            });
        }
    };
});

/* Styles go here */
.chat-box {
    padding: 8px;
    border-radius: 8px;
}
.message-box {
    border-top: 1px solid #E0E0E0;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: white;
}

.message {
    overflow: scroll;
    margin: 4px;
    border: 1px solid #E0E0E0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    height: 110px;
}

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>
<body ng-app='myApp' layout="column" layout-fill ng-controller="ChatCtrl as ctrl">
  <!-- content starts here -->
  <md-toolbar class="md-whiteframe-z2">
    <div class="md-toolbar-tools">
      <h2>
          hello
        </h2>
    </div>
  </md-toolbar>
  <md-content scroll-to-bottom="ctrl.messages" layout="column" style="background-color: #F5F5F5;" ng-style="{'height':ctrl.messageWindowHeight}">
      <div class="chat-box">
        <ol class="discussion">
          <li ng-repeat="message in ctrl.messages track by $index" id="msg-{{$index}}">
            {{message}}
          </li>
        </ol>
      </div>
  </md-content>
  <form name="userForm" novalidate ng-submit="ctrl.send()" layout="row" layout-padding layout-align="center center" class="message-box">
    <div class="message" flex>
      <md-input-container class="md-block">
        <input type="text" name="text" ng-model="ctrl.user.text" />
      </md-input-container>
    </div>
    <md-button class="md-icon-button" type="submit">
      send
    </md-button>
  </form>
</body>

Scroll to bottom when new message added

This worked for me:

outputArea[0].scrollTop = 9e9;

Can't seem to scroll to bottom of div on page load (angularJS)

With the help above, this is what I ended up doing:

Directive

//automatically scrolls to the bottom of the list on load
app.directive('scrollToBottom', function($timeout) {
    return {
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                  $timeout(function() {
                      var scroll_id = attr.scrollId;
                      var objDiv = document.getElementById(scroll_id);
                      objDiv.scrollTop = objDiv.scrollHeight;
                  }, 0);
            }
        }
    };
});

HTML

<div class="scrollable-hidden-parent">
   <div class="scrollable-hidden-child" id="scrollable-hidden">
      <div ng-repeat="message in chats" scroll-to-bottom scroll-id="scrollable-hidden">
          <div>{{message.name}}  {{message.message}}</div>
       </div>
    </div>
</div>

CSS

.scrollable-hidden-parent {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scrollable-hidden-child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; 
    box-sizing: content-box;
}

Autoscroll down angularjs

angularjs-scroll-glue

An AngularJs directive that automatically scrolls to the bottom of an
element on changes in it's scope.

Link: https://github.com/Luegg/angularjs-scroll-glue

How to make the page to scroll down automatically to the bottom as soon as message is sent or message is opened in angular2

Here is a solution in angular way:

I added #scrollCottom template variable.
You can use ViewChild to get the Element reference and should check the scroll bottom issue.

Component;

import { AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class YourComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollBottom') private scrollBottom: ElementRef;

    ngOnInit() {
        this.scrollToBottom();
    }

    ngAfterViewChecked() {        
     this.scrollToBottom();        
    } 

    scrollToBottom(): void {
        try {
            this.scrollBottom.nativeElement.scrollTop = this.scrollBottom.nativeElement.scrollHeight;
        } catch(err) { }
    }
}

HTML:

<ul #scrollBottom>
  <li *ngFor="let reply of message_show.messages">
    <img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
    <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
    <p>{{reply.text}}</p>
  </li>
</ul>

Scroll Bar not working in chatbox?

Try this

<div class="chat active-chat" id="scroll" style="max-height: 200px;
        overflow-y: auto;">
    <div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false" style="height:20px;">
        <div class="bubble" ng-class="c.type">
                       {{c.message}}     
            <span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
        </div>
    </div>
</div>

Scroll to Bottom in Chat Box in Angularjs