AngularJS 中从顶部（反向）无限滚动

元素作为滚动容器。我们可以给该元素添加CSS样式，使其具有固定的高度和滚动条。

html
  

在上面的代码中，我们使用了AngularJS的指令ng-style来动态设置滚动容器的高度，以及overflow-y属性来显示垂直滚动条。

步骤二：监听滚动事件

接下来，我们需要在滚动容器上监听滚动事件。这样，当用户滚动到顶部时，我们可以触发加载更多内容的逻辑。我们可以使用AngularJS的指令ng-scroll来实现这一功能。

html
  

在上面的代码中，我们将ng-scroll指令绑定到滚动容器上，并将其设置为触发scrollToTop函数。我们将在下一步中实现这个函数。

步骤三：加载更多内容

现在，我们需要实现scrollToTop函数，该函数将负责加载更多内容并将其添加到滚动容器的顶部。我们可以使用AngularJS的$http服务来发送HTTP请求，从服务器获取新的内容。

javascript
angular.module('scrollApp', [])
  .controller('scrollController', ['$scope', '$http', function($scope, $http) {
    $scope.containerHeight = 500; // 设置滚动容器的高度
    $scope.content = []; // 存储加载的内容
    $scope.scrollToTop = function() {
      if ($('.scroll-container').scrollTop() === 0) { // 检查滚动到顶部
        $http.get('/api/content') // 发送HTTP请求获取新内容
          .then(function(response) {
            $scope.content = response.data.concat($scope.content); // 将新内容添加到现有内容的顶部
          });
      }
    };
  }]);

在上面的代码中，我们创建了一个AngularJS模块和控制器。我们将$scope注入到控制器中，以便可以在视图中访问变量和函数。我们定义了一个$scope.containerHeight变量来设置滚动容器的高度。我们还定义了一个$scope.content数组来存储加载的内容。

在$scope.scrollToTop函数中，我们首先检查滚动容器的滚动位置是否为0，以确定是否滚动到顶部。如果是，我们使用$http服务发送一个GET请求到服务器的/api/content端点，以获取新的内容。一旦我们得到响应，我们将新的内容与现有内容连接并将结果赋值给$scope.content数组。

案例代码

html
  
  
  
    
      {{ item }}
    
  
  

在上面的代码中，我们使用了Bootstrap CSS框架来设置基本的样式。我们还引入了AngularJS和jQuery库。

在标签中，我们使用ng-app和ng-controller指令来指定AngularJS模块和控制器。我们使用ng-repeat指令来循环遍历$scope.content数组，并在滚动容器中显示内容。

通过上述步骤和案例代码，我们可以实现从顶部开始滚动并加载更多内容的功能。这对于需要在页面上显示大量内容的应用程序非常有用，例如社交媒体流或新闻文章列表。