Question

解释我的代码，当用户滚动到div的底部时，新数据被推送到array1，滚动条也被推到新数据上方，因此用户必须滚动过去的新数据再次到达div的底部。

然而，当用户滚动到div的顶部时，数据被推送到数组，但滚动条停留在div的最顶部，这意味着用户甚至不知道新数据是否已被加载。 / p>

我想要实现的目标：

我希望滚动到底部的滚动效果（滚动条与数组推动一起移动）与滚动到div顶部的效果相同。因此，用户滚动顶部并加载新数据，并根据新数据推下滚动条。

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Angular Test</title>
</head>
<style>
  .frame{
    width:300px;
    height:400px;
    background-color: gray;
    overflow-y:scroll;
  }
</style>
<body>

  <div class="frame" ng-controller="publicCtrl" id="frame">
    <div class="posts">
      <p class="post" ng-repeat="obj in array1 track by $index">{{obj}}</p>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script>
  var myAppModule = angular.module('app', []);
  myAppModule.controller('publicCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.message="hi";
    $scope.array1 = [];
    for(var i = 0; i < 20; i++){
      $scope.array1.push($scope.message="hi");
   }
   var wrapper = document.getElementById('frame');
   wrapper.onscroll = function (evt){
     //detect when scroll has reached the top of the frame
     if(wrapper.scrollTop === 0){
       console.log('top of frame');
       for(var i = 0; i < 20; i++){
         $scope.array1.push($scope.message="hi");
      }
      $scope.$apply();

     }

     //detect when scroll has reached the bottom of the frame
     if(wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight){
        console.log('bottom of frame');
        for(var i = 0; i < 20; i++){
          $scope.array1.push($scope.message="hi");
       }
       $scope.$apply();
     }
   }

   $timeout(function(){
     wrapper.scrollTop += 120;
   },0);

  }]);
  </script>
</body>
</html>

关于如何在普通的javascript或Angularjs中实现这一点的任何建议？

如果我没有意义，请测试我的代码。

以角度将数据推送到数组会导致对div的不一致滚动效果？

0 个答案: