Menu
I am trying to automatically scroll to bottom whenever there is a new message.
My code moves the scrollbar but it does not take it to exact bottom. Kindly help. Here is my plunker.
http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9
Here is my HTML:
<!DOCTYPE html> <html> <head> <script data-require="[email protected]" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div ng-app="Sojharo"> <div ng-controller="MyController"> <div id="chatBox"> <div ng-repeat="message in messages"> <div class="chatMessage"> <div class="messageTextInMessage">{{message.msg}}</div> </div> </div> </div> <div class="chatControls"> <form ng-submit="sendIM(im)"> <input type="text" ng-model="im.msg" placeholder="Send a message" class="chatTextField" /> </form> Type and press Enter </div> </div> </div> </body> </html> Here is javascript:
angular.module('Sojharo', []) .controller('MyController', function($scope) { $scope.messages = []; $scope.im = {}; $scope.sendIM = function(msg) { $scope.messages.push(msg); $scope.im = {}; var chatBox = document.getElementById('chatBox'); chatBox.scrollTop = 300 + 8 + ($scope.messages.length * 240); } }); Kindly let me know of angular way for this too. Following way, I found on Internet, does not work:
Here are these directives
.directive("myStream", function(){ return { restrict: 'A', scope:{config:'='}, link: function(scope, element, attributes){ //Element is whatever element this "directive" is on getUserMedia( {video:true}, function (stream) { console.log(stream) element.src = URL.createObjectURL(stream); //scope.config = {localvideo: element.src}; //scope.$apply(); //sometimes this can be unsafe. }, function(error){ console.log(error) }); } } }) .directive('ngFocus', [function() { var FOCUS_CLASS = "ng-focused"; return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ctrl) { ctrl.$focused = false; element.bind('focus', function(evt) { element.addClass(FOCUS_CLASS); scope.$apply(function() {ctrl.$focused = true;}); }).bind('blur', function(evt) { element.removeClass(FOCUS_CLASS); scope.$apply(function() {ctrl.$focused = false;}); }); } } }]); 
446
You can create a directive for this:
.directive('scrollBottom', function () { return { scope: { scrollBottom: "=" }, link: function (scope, element) { scope.$watchCollection('scrollBottom', function (newValue) { if (newValue) { $(element).scrollTop($(element)[0].scrollHeight); } }); } } }) http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=preview
BTW: avoid DOM manipulation inside controllers (use directives instead).
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
