Currently, I am utilizing angular 1 along with angular material. I am trying to incorporate md-subheader with multiple md-virtual-repeat-containers within an ng-repeat loop. The source code can be found on this codepen.
The issue I am facing is slightly complex to articulate. To begin with, you need to resize the viewport so that the height is smaller than a full container.
Let's say when I reach the end of one section, a second section should appear and while scrolling, move to the top of the screen and replace the subheader of the first section (demo here). Everything works fine as long as I am scrolling within the first section container. However, once my mouse reaches the second section container, it scrolls within that container and the subheader of the first section still remains at the top of the screen.
You can view a Video demonstration here. Initially, I scroll on the top content, then I scroll on the subheader causing it to move up, finally, when I scroll through the second content, the subheader does not move up as expected (Try scrolling in the second content in the provided angular demo link).
I acknowledge that the codepen shared has another bug present (not occurring in my original sources but randomly appearing in the codepen..), resembling an infinite scroll. You can use the slider on the right to scroll slowly and observe the issue. This particular bug is not the one I am looking to address with this problem.
The HTML structure is fairly simple, acting as a mock pattern to replicate the bug encountered in my application:
<section ng-repeat="title in vm.dataset">
<md-subheader>{{$index + 1}} Section</md-subheader>
<md-virtual-repeat-container>
<p md-virtual-repeat="item in vm.dataset" md-on-demand="{{vm.onDemand}}">{{item.value}}</p>
</md-virtual-repeat-container>
</section>
I suspect that the issue lies in the necessity to specify a definite height for virtual repeaters containers in order for them to function correctly. This specific setup would function seamlessly with a regular ng-repeat directive.