Reputation: 35
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
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