How to control scrollbar in angular?

Question

Basically I'm working in a chat web application.

It should work pretty similar to the gchat. I mean, if the srollbar is at the middle of the div, it should show an alert saying you have a new message. If the scrollbar is at the bottom it should show directly the new message.

So my main issue, is how can I know where if the scrollbar from angular.

Any clues?

http://stackoverflow.com/questions/16844435/angular-js-implementing-custom-scrollbar — ANSHUL GERA, Feb 23 '16 at 18:45

Travesty3 · Accepted Answer · 2016-02-23T19:44:23.360

Here is an example. It undoubtedly needs work to make it cross-browser compatible, but it gets you about 90% of the way there.

https://plnkr.co/edit/9OhQNEz58GW47uPR0frq?p=preview

var app = angular.module('scroll', []);
app.controller('scrollController', function($scope, $interval) {
  // simulate receiving a message
  $interval(function() {
    $scope.$broadcast('message-received');
  }, 5000);
});
app.directive('chatWindow', function() {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, elem) {
      scope.$on('message-received', function() {
        elem = angular.element(elem);
        if (elem[0].scrollHeight - elem[0].scrollTop != elem[0].clientHeight) {
          console.log('Message Received');
        } else {
          console.log('at bottom');
        }
      });
    }
  };
});

[chat-window] {
  border: 1px solid #CCC;
  height: 100px;
  overflow-y: auto;
}

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="scroll" ng-controller="scrollController">
    <div chat-window>
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
  </body>

</html>

How to control scrollbar in angular?

1 Answers1