如何强制页面始终滚动到底部？

Question

I am using angular js to build a chat app. The problem is when the page loads or a new chat comes in, it doesn't properly scroll to the bottom of the page. This is the code that handles the scroll to bottom of page

var app = angular.module('chatApp', ['ui.bootstrap','mwl.confirm']);
app.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    if (scope.$last) {
      document.getElementById("main-container").scrollTo(0, document.getElementById("main-container").scrollHeight);
    }
     };
  })

Here #main-container is the entire chat box in which chat happens. Now I found some solutions on the web and this one seems to kind of work.

var app = angular.module('chatApp', ['ui.bootstrap','mwl.confirm']);
app.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    if (scope.$last) {
      var objDiv = document.getElementById("main-container");
      objDiv.scrollTop = objDiv.scrollHeight;
    }
     };
  })

But the problem is some chat may have a link which opens up in the card. So after implementing this solution, when I refresh the page, it does scrolls to the bottom but as soon as it encounters a card with html link which opens up, it stops scrolling down and stops there.

Is there a way to force the page to scroll to bottom or maybe a timer which would scroll to bottom every other second. (Not sure if this is a good solution)?

Answer 1

If you're already binding to a chat message collection inside your template, you can simply craft a directive which watches for changes to that collection in order to immediately perform scroll adjustments. This way, you avoid having an arbitrary interval between scroll adjustments.

Here's a distilled example of how you might go about this:

 angular .module('app', []) .controller('ctrl', function ($scope, $interval) { $scope.messages = []; // Simulate new chat messages being appended $interval(() => $scope.messages.push(Date.now()), 1000); }) .directive('autoScrollBottom', function () { return function (scope, el, attrs) { scope.$watchCollection(attrs.autoScrollBottom, function () { el[0].scrollTop = el[0].scrollHeight; }); }; }); 

 .chat { height: 100px; overflow-y: auto; } 

 <div ng-app="app" ng-controller="ctrl"> <div class="chat" auto-scroll-bottom="messages"> <div ng-repeat="m in messages">{{m}}</div> </div> </div> <script src="https://unpkg.com/angular@1.7.8/angular.min.js"></script> 

Answer 2

You can create a directive for this:

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