Question

以下是我的模板代码：

<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;
}

有人可以指导我怎么做吗？提前谢谢。

Answer 1

如果指令，请将您的邮政编码放在邮政链接方法中。

Answer 2

我是使用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社区！

如何使用JQuery滚动到由ng-repeat Angular JS生成的div的底部？

2 个答案: