Scroll to bottom when new md-list-item is added to the md-list Angular Material

Question

I'm implementing a chat using Angular and Angular Material and Im stuck at making the md-list scroll at the very bottom when i modify the model with new message in messages array. Tried many things but with no success watchCollection is working but i cant seem to find the way to scroll to the md-list at the very bottom. Maybe its something with the material

HTML:

<md-content flex layout-padding>
        <md-list flex scroll-bottom="vm.messages">
            <md-list-item class="md-3-line" ng-repeat="msg in vm.messages">
                <!--<img ng-src="{{user.userAvatar}}" class="md-avatar" alt="{{user.userName}} Avatar"/>-->
                <div class="md-list-item-text" layout="row">
                    <div flex="15"></div>
                    <div flex="70" layout="column">
                        <h3>{{msg.text}}</h3>
                    </div>
                    <div flex></div>
                </div>
            </md-list-item>
        </md-list>
    </md-content>

Angular Directive:

angular.module('chat').directive('scrollBottom', function ($timeout) {
    return {
        restrict: 'A',
        scope: {
            scrollBottom: "<"
        },
        link: function (scope, element) {
            scope.$watchCollection('scrollBottom', function (newValue) {
                if (newValue)
                {
                    element.scrollTop =  element.scrollHeight;
                }
            });
        }
    }
})

Maybe [this question](http://stackoverflow.com/questions/40160490/angularjs-scroll-to-bottom-of-div) could help. — troig, Jan 11 '17 at 11:37
y did it and now it works moving to the md-content did the trick — Georgi Antonov, Jan 11 '17 at 11:45

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

As I post in a comment, and taking this SO question as reference, the key here is adding your scrollBottom directive to md-content element instead of md-list.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 11 '17 at 11:50

troig

7,072
4
37
63

Scroll to bottom when new md-list-item is added to the md-list Angular Material

1 Answers1