Weird scroll behavior with md-virtual-repeat-container

[matgr1]

it's probably easiest to just demostrate, so here's a codepen: http://codepen.io/matgr1/pen/BNEEmW

and here are the problems:

1.) scroll to the bottom, shrink the output pane to maybe half the height, start scrolling down again - it keeps going forever just repeating the last few items

2.) increase the output pane height (to larger than the original) - the numbers no longer go all the way to the bottom

[matgr1]

one more issue I just noticed (and updated the codepen to show it): the items won't fill horizontally all the way to the scrollbar

[RolandHeath]

Can definitely confirm this, on Chrome Version 44.0.2403.155 (64-bit)
I had a similar issue using an md-list inside a virtual repeat. In some cases the last element(s) can't be viewed because they can't be scrolled to.

Looking around, I found that in VirtualRepeatContainerController.prototype.getScrollSize
this.scrollSize doesn't match either of this.scroller.scrollheight or this.scroller.scrollwidth.

I'm pretty should match whichever of these is in use, the bug is probably arising from this mismatch.

Another note: It doesn't seem to occur for me if the window is fullscreen, even if I have the debug tools open and they're shrinking the effective page size, and even if I resize the debug tools.

[bluebirdtech]

+1 seeing the same problems here when the container is resized

[KorucuTech]

Thank you for this sample on codepen.io.

I don't know if this will make sense but.

How would this work with large datasets from a DB and a buffer.
Is it possible to make it do an api call to get the next x number of items while scrolling as it hits the bottom so we don't pull large amount of data at once?
Is this what md-on-demand for?

thanks

[jayj]

I have the same issue, but only when I use md-list and md-list-item inside the md-virtual-repeat-container. If I switch to using divs it works fine.

Here's a demo:
http://plnkr.co/edit/x4oEH0ye9SSVxlpYcfZN?p=preview

[RolandHeath]

Yep - changing your plunk seems to confirm that - if I change either the md-list or the md-list-item to divs, it scrolls ok.

[RolandHeath]

This seems to be caused by a css interaction.
In the plunk, this issue goes away if you switch
<md-list> with
<md-list style="padding-top:0;">
Or, as an alternative workaround, put the virtual-repeat inside the md-list, but outside the ng-repeated md-list-item.

[arshdefoamed]

I tried changing the handleScroll_ function to get a work around for the above issue (for vertical case only )and it seems that my changes are working fine for my case. Sadly, I dont have the kind of skills to test it extensively to make sure that all types of cases are covered. There is a probability that my approach was completely wrong and it was just a fluke for my case. I am sharing my code in case someone is lucky and his/her problem gets solved.

VirtualRepeatContainerController.prototype.handleScroll_ = function() {
  var offset = this.isHorizontal() ? this.scroller.scrollLeft : this.scroller.scrollTop;
  if (offset === this.scrollOffset) return;

  var itemSize = this.repeater.getItemSize();
  if (!itemSize) return;

  var num = NUM_EXTRA;
  if(!this.isHorizontal())
  {
      /**
       *  Offset should not be greater than differences in height of offsetter and sizer
       *  Moreover to calculate transform extra count should be set as zero for the bottom of scroll  
       */
      var maxOffset  = this.sizer.offsetHeight - this.offsetter.offsetHeight;
      if(offset >maxOffset )
      { 
          offset = maxOffset;
          var num = 0;
      }
  }
  var numItems = Math.max(0, Math.floor(offset / itemSize) - num);
  var transform = this.isHorizontal() ? 'translateX(' : 'translateY(';
      transform +=  (numItems * itemSize) + 'px)';

  this.scrollOffset = offset;
  this.offsetter.style.webkitTransform = transform;
  this.offsetter.style.transform = transform;

  this.repeater.containerUpdated();
};

[ccd2008]

I was having issues with the bottomless scrolling. I added this to mostly fix the problem.

VirtualRepeatContainerController.prototype.handleScroll_ = function() {
  var offset = this.isHorizontal() ? this.scroller.scrollLeft : this.scroller.scrollTop;
  if (offset === this.scrollOffset) return;
  var itemsLength = this.repeater.itemsLength;
  var itemSize = this.repeater.getItemSize();
  if (!itemSize) return;
  var numItems = Math.max(0, Math.floor(offset / itemSize) - NUM_EXTRA);
  if(itemsLength > this.repeater.endIndex || offset < this.scrollOffset){
    var transform = this.isHorizontal() ? 'translateX(' : 'translateY(';
        transform +=  (numItems * itemSize) + 'px)';
    this.scrollOffset = offset;
    this.offsetter.style.webkitTransform = transform;
    this.offsetter.style.transform = transform;
  }
  if (this.bindTopIndex) {
    var topIndex = Math.floor(offset / itemSize);
    if (topIndex !== this.topIndex && topIndex < this.repeater.itemsLength) {
      this.topIndex = topIndex;
      this.bindTopIndex.assign(this.$scope, topIndex);
      if (!this.$rootScope.$$phase) this.$scope.$digest();
    }
  }
  this.repeater.containerUpdated();
};

[jaymanned]

+1 in 1.0-rc5. I've removed padding and margins from the md-virtual-repeat-container but still get the issue in both Safari 8.0.7 (10600.7.12) and Chrome 47.0.2526.106.

[shobhit-m]

Try using md-item-size.