Question

＆＃13;

var app=angular.module('scroll', ['angular-scroll-complete']).controller("Main",Main)


//app.js
function Main($scope) {
    $scope.items = [];
    var counter = 0;
    var scrollingTop=document.getElementById("fixed");
    //alert("controller"+scrollingTop.offsetHeight)
    scrollingTop.scrollTop=scrollingTop.scrollHeight
   console.log("hi==="+scrollingTop.scrollHeight)
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({id: counter});
            counter += 10;
        }
       
    };
    $scope.loadMore();
}


//angular-scroll-complete.js
var app=angular.module('scroll', ['angular-scroll-complete']).controller("Main",Main)



function Main($scope) {
    $scope.items = [];
    var counter = 0;
    var scrollingTop=document.getElementById("fixed");
    //alert("controller"+scrollingTop.offsetHeight)
    scrollingTop.scrollTop=scrollingTop.scrollHeight
   console.log("hi==="+scrollingTop.scrollHeight)
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({id: counter});
            counter += 10;
        }
       
    };
    $scope.loadMore();
}

＆＃13;

<html>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>AngularJS: Infinite Scrolling </title>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <script src="app.js"></script>
   <script  src="angular-scroll-complete.js"></script>
   
    
    <style type="text/css">
    li {
  height: 120px;
  border-bottom: 1px solid gray;
}
#fixed {
    height: 400px;
    overflow: auto;
}
  </style>
  </head>

  <body ng-app="scroll" ng-controller="Main">
    <div id="fixed"  when-scrolled="loadMore()" >
      <ul>
        <li ng-repeat="i in items | orderBy:'id':true ">{{i.id}}</li>
      </ul>
    </div>
    


    
  </body>

</html>

＆＃13;

嗨我正在为skype开发滚动条，就像应用程序一样，将数据加载到顶部但滚动条一旦自动触及顶部就会自动下降，但下一个数据加载成功。

这是我的plunker链接https://plnkr.co/edit/NobKGyNnpLZHnoHAX824?p=preview

＆＃13;

angular.module('angular-scroll-complete', []).directive('whenScrolled', function () {
    return {
        link: {
          pre: function(scope,elem,attr){
              var raw = elem[0];
              var oldscrollHeight=[];
              var scrollTop;
              elem.bind('scroll', function () {
                if (Math.round(raw.scrollTop) ==0) {
              console.log("raw.scrollTop="+Math.round(raw.scrollTop) +" "+ "raw.offsetHeight=="+raw.offsetHeight +" "+"raw.scrollHeight=="+raw.scrollHeight+"oldscrollHeight=="+oldscrollHeight)
              scope.$apply(attr.whenScrolled);
                     
                }
        });
          },
           post: function(scope,elem,attr){
       scope.$watch(function () {
         return elem[0].value;
        }, 
        function (e) {
           elem[0].scrollTop = elem[0].scrollHeight;
        });
    
          }    
        
        }
    };
});

＆＃13;

<html>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>AngularJS: Infinite Scrolling </title>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <script src="app.js"></script>
   <script  src="angular-scroll-complete.js"></script>
   
    
    <style type="text/css">
    li {
  height: 120px;
  border-bottom: 1px solid gray;
}
#fixed {
    height: 400px;
    overflow: auto;
}
  </style>
  </head>

  <body ng-app="scroll" ng-controller="Main">
    <div id="fixed"  when-scrolled="loadMore()" >
      <ul>
        <li ng-repeat="i in items | orderBy:'id':true ">{{i.id}}</li>
      </ul>
    </div>
    


    
  </body>

</html>

＆＃13;

Answer 1

$ionicScrollDelegate.scrollBottom();
$ionicScrollDelegate.scrollTop();

API返回数据后调用上面的方法。它将滚动到页面底部或页面顶部。 Ref

此致

滚动条功能，可以在滚动到顶部时加载更多数据

1 个答案: