Vlad Vydryhan
Vlad Vydryhan

Reputation: 35

move scrollbar at the end of div element angularjs chat

I have a message container block which contains messages. How can i move scroll to bottom of this div? I have a directive which move it to the bottom but it doesn't work properly.

Template:

<div class="message-area scroll default always-visible" scroll-bottom="$ctrl.allMessages">
        <div class="container-column-fluid">
            <message-container ng-repeat="message in $ctrl.allMessages" message="message"></message-container>
        </div>
    </div>

Directive:

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

            });
        }
    };
}

export { scrollBottom };

Upvotes: 1

Views: 256

Answers (1)

Vlad Vydryhan
Vlad Vydryhan

Reputation: 35

Oh i forgot to insert $timeout in function... All day working...

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

            });
        }
    };
}

export { scrollBottom };

Upvotes: 1

Related Questions