How can I make a virtual scroll with corner js?

Question

I'm trying to make a directive that I can make a virtual scroll, as the user scrolls the table, the table deletes the "old" views and adds "new" views, like repeating a collection, but I failed, I think I did not understand the math behind it, maybe Does anyone help me?

this is my directive code:

BaseModule.directive('myScroll', function() { return { restrict:"A", scope:{ rows:"=", headers:"=" }, link: function(scope,el) { var scrollTop = 0; var scrollLeft = 0; angular.element(el).on('scroll',function(){ scrollTop = $(el).scrollTop(); scrollLeft = $(el).scrollLeft(); $(el).parent().find(".header").scrollLeft(scrollLeft); var height = $(el).height(); var numberOfRows = height/23; var initialRow = scrollTop/23; var html = ""; for(i=0; i<numberOfRows;i++){ var row = scope.rows[i+initialRow]; html = html + addRow(row,i+initialRow); } $(el).find('.tbody-scroll').append(html); }); scope.$watch('rows',function(rows){ var height = $(el).height(); var numberOfRows = height/23; var initialRow = scrollTop/23; var html = ""; for(i=0; i<numberOfRows;i++){ var row = rows[i+initialRow]; html = html + addRow(row,i+initialRow); } $(el).find('.tbody-scroll').append(html); }); var addRow = function(row,index){ var html = ""; var pos = 0; var totalWidth = 0; angular.forEach(row,function(col){ var width = scope.headers[pos].width; totalWidth = totalWidth + width; html = html + "<span style='width:"+width+"px'>"+col.value+"</span>"; pos++; }); html = "<div class='row' style='top:"+index*23+"px;width:"+totalWidth+"px;'>"+html; html = html + "</div>"; return html; }; } }; }); <!-- my directive .html --> <div class="mTable"> <div class="header" ng-style="headerWidth(headers())"> <span ng-repeat="header in headers()" ng-style="widthStyle(header)"> {{::header.label}} </span> </div> <div class="tbody-container" my-scroll headers="headers()" rows="rows()"> <div class="tbody-scroll" ng-style="scrollHeight(rows(),headers())"></div> </div> </div> 

Answer 1

Providing a complete answer with code may require too much effort. This library implements virtual scrolling on ng-repeat https://github.com/stackfull/angular-virtual-scroll in the description, as well as an article on how to implement this function yourself.

The main idea is to make two divs, one above and one below the list, the size of which is determined by the number of elements inside the list (this approach has a limitation, since the elements of the list must have either the same height or their height must be fixed), then you delete elements as they disappear from the viewport and resize the div according to the number of elements that are not currently displayed, and your position in the list

Answer 2

Not a direct answer to your question, but an alternative: you can look at the ui-scroll directive , which is a replacement for ng-repeat and has a similar function.

Example in your controller

 $scope.movieDataSource = { get : function (index, count, callback) { var i, items = [$scope.userMovies], item; var min = 1; var max = 1000; for (i=index ; i<index + count ; i++) { if(i < min || i > max) { continue; } item = { title: $scope.userMovies.title, imageURL: $scope.userMovies.poster_path }; items.push (item); } callback (items); } } 

And in your opinion:

 <div ui-scroll="item in movieDataSource"> {{item.title}} </div>