Question

我正在尝试制作一种聊天网络应用程序。对于UX，我想修复div的slimscroll底部。

要做的是，我用HTML编写了这样的代码，

<div class="ibox-content" slim-scroll>
     <div ng-repeat="chat in chats track by $index">
         <p>{{chat}}</p>
     </div>
</div>

我这样声明了angularjs指令。

function slimScroll($timeout){
   return {
       restrict: 'A',
       scope: {
           boxHeight: '@'
       },
       link: function(scope, element) {
           $timeout(function(){
               element.slimscroll({
                   height: '75vh',
                   railOpacity: 0.9,
                   scrollTo: element.scrollHeight,
                   start: 'bottom'
               });
           });
       }
   };
}

但是我认为scrollTo: element.scrollHeight,不起作用。我该做什么？有解决的办法吗？

Answer 1

Element返回angular.element对象。您需要element[0]才能获取本机元素。

function slimScroll($timeout){
   return {
       restrict: 'A',
       scope: {
           boxHeight: '@'
       },
       link: function(scope, element) {
           $timeout(function(){
               element.slimscroll({
                   height: '75vh',
                   railOpacity: 0.9,
                   scrollTo: element[0].scrollHeight,
                   start: 'bottom'
               });
           });
       }
   };
}

Answer 2

我认为您的方法行不通-阅读了documentation for Jquery Slim Scroll后，我认为您每次收到新的聊天消息时都需要致电element.slimscroll，而不仅仅是在初始负载。

一种执行此操作的方法可能是允许您的苗条滚动指令采用数组。您可以$ watch此数组以查看其长度是否改变，然后可以在元素上调用scrollTo。

jQuery Slim Scroll和Angular JS，如何修复div底部的滚动？

2 个答案: