[英]How to scroll to bottom of div generated by ng-repeat Angular JS using JQuery?
以下是我的模板代码:
<div class="chatbox" id="mailBody" >
<div class="panel-body" ng-repeat="mail in mails">
<div class="m-b-none" ng-if="mail.inboxMessageType == 1">
<a href class="pull-left thumb-sm avatar" ng-if="senderLength>=10"><img src="img/a2.jpg" alt="..."></a>
<a href class="pull-left thumb-sm avatar" ng-if="senderLength<10"><img src="img/business2.png" alt="..."></a>
<div class="m-l-xxl">
<div class="pos-rlt wrapper b b-light r r-2x">
<span class="arrow left pull-up"></span>
<p class="m-b-none mailbody">{{mail.body}}</p>
<p><span class="label bg-info dk m-l-sm taglist" ng-repeat="tag in mail.taglist" ng-if="mail.taglist">{{tag.name}}</span></p>
</div>
<small class="text-muted"><i class="fa fa-ok text-success"></i>{{ mail.date}}</small>
</div>
</div>
</div>
我想在加载时滚动到该聊天框的底部。 我通过JQuery做到了。 这是代码:
$('#mailBody').stop().animate({scrollTop: $("#mailBody")[0].scrollHeight}, 2000);
它正在向下滚动,但在中间停止。 是否有任何事件可以在div的最大负载上附加或如何执行?
Chatbox CSS:
.chatbox {
height: 327px;
width: 100%;
overflow: scroll;
overflow-x:hidden;
overflow-y:auto;
}
有人可以指导我怎么做吗? 提前致谢。
如果需要,请将您的邮政编码放入post link方法中。
我是使用Angular Directive完成的。
angular.module('app')
.directive('myScrollDirective', function() {
return function(scope, $element, attrs) {
if (scope.$last){
//window.alert("im the last!");
window.setInterval(function() {
var elem = document.getElementById('smsBody');
elem.scrollTop = elem.scrollHeight;
foo();
}, 1000);
var foo = function () {
clearInterval(myInterval);
};
}
};
});
在页面上,我刚刚添加了此指令。
div class="panel-body" ng-repeat="mail in mails" my-scroll-directive>
而已。 感谢Stackoverflow社区!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.