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?
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>