1

I'm using the angular-ui ui-scroll and it's great when I scroll down, keeps adding items as expected. However when I scroll up, it stops at the top of the last batch that I loaded. For example if I have 100 items and my buffer size is 10, and I've scrolled down so that items 61-70 are showing, when I scroll back up I want to see items 51-60. However I can't scroll up past item 61. I don't know what I'm doing wrong.

Here's the html:

<div row="row" ui-scroll="row in transactionSource" buffer-size="10" >{{row.data}}</sq-transaction>

Here's the script:

        $scope.transactionSource = {

        get: function (index, count, callback) {
            if (index < 0) {
                callback([])
           }
            else {
                var buffer = 10;
                var end = ctrl.nextIndex + buffer;
                if (end > ctrl.transactions.length) end = ctrl.transactions.length;
                var items = ctrl.transactions.slice(ctrl.nextIndex, end);
                ctrl.nextIndex = end;

                callback(items);
            }
       }
    };

If it's related, when I console.log the index and count values received, after the first load of 10 I get an index of -9 (in which case I return an empty array - if I don't do this, the entire array gets loaded). When I scroll up, I don't get a console.log message at all so it's like the 'get' only gets called when scrolling down.

Thanks in advance for any and all help.

MamaCasc
  • 55
  • 7

1 Answers1

0

Your datasource looks wrong. Items retrieving (slicing in your case) should be based on index and count parameters that you have from the datasource.get method arguments. I'd like to post an example of datasource implementation where the result items array is limited from 0 to 100 and should be sliced from some external data array:

get: function(index, count, success) {
    var result = [];
    var start = Math.max(0, index);
    var end = Math.min(index + count - 1, 100);
    if (start <= end) {
        result = externalDataArray.slice(start, end + 1);
    }
    success(result);
};

Hope it helps!

dhilt
  • 18,707
  • 8
  • 70
  • 85
  • Thanks for your reply. I'm using the index and count values now but I'm getting in a loop. My array has >1300 items. I've set buffer-size to 100. Using your code (I changed 'end' to Math.min(index + count -1, myArray.length), the index comes in alternating between 1 and 101. This loop continues until I kill the page. Any ideas? – MamaCasc Sep 08 '17 at 16:49
  • Need to see your datasource full implementation, it is the first candidate in loop issues. The second one is the markup: viewport (which height must be constrained) and rows (there is marging collapsing issue which is still not fixed)... I believe, the runnable repro will help us to detect the problem very quick. – dhilt Sep 08 '17 at 19:10
  • Update: This is actually working pretty well in IE. The looping problem only occurs in Chrome. I am using the ui-scroll-viewport directive on the parent div of the ui-scroll element, which I've read should take care of the scroll anchor problem in Chrome, so is there another known issue in Chrome? I'll post my datasource method in the next comment as this one is running out of room. – MamaCasc Sep 08 '17 at 20:05
  • ` vm.transactionSource = { get: function (index, count, success) { var result = []; var start = Math.max(0,index); var end = Math.min(index + count -1, vm.transactionSourceArray.length); if (start <= end) { result = vm.transactionSourceArray.slice(start, end + 1); } success(result); } } – MamaCasc Sep 08 '17 at 20:08
  • Datasource looks perfect now. The different behavior in IE and Chrome pushes on thought that this becomes a template issue. Two main things happen with such a loop in that case: unfixed viewport height and scroll anchoring. Maybe something overrides overflow-anchor css rule? Anyway, without a repro we wouldn't able to take forward the issue. – dhilt Sep 09 '17 at 01:25