SPA with angular library and [parentScroll]="scroll.window"

[randym127]

<virtual-scroller [items]="visibleSites" #scroll style="height: 100vh; overflow-x: hidden !important" [parentScroll]="scroll.window"> <div class="container-fluid"> <div site-selection class="row" #container> <dc-site-card *ngFor="let site of scroll.viewPortItems; trackBy: trackByFn" [site]="site" class="col-sm-12 col-md-6" [ngClass]="getColClass()"></dc-site-card> </div> <!--row--> </div> </virtual-scroller>

So I am having an issue with multiple vertical scrolls showing up, the component that has the data is in a library and loaded in a SPA application. When I add the scroll.window it does not scroll through the data, it only shows the initial amount of cards. When I remove the parentScroll add the data is loaded properly however there are 2 vertical scrolls.

Love this component, but I am stuck on this for too long, any help would be greatly appreciated. Just not sure why it does not scroll through the data with the parentscroll set.

[martinwright]

<virtual-scroller [items]="visibleSites" #scroll style="height: 100vh; overflow-x: hidden !important" [parentScroll]="scroll.window"> <div class="container-fluid"> <div site-selection class="row" #container> <dc-site-card *ngFor="let site of scroll.viewPortItems; trackBy: trackByFn" [site]="site" class="col-sm-12 col-md-6" [ngClass]="getColClass()"></dc-site-card> </div> <!--row--> </div> </virtual-scroller>

So I am having an issue with multiple vertical scrolls showing up, the component that has the data is in a library and loaded in a SPA application. When I add the scroll.window it does not scroll through the data, it only shows the initial amount of cards. When I remove the parentScroll add the data is loaded properly however there are 2 vertical scrolls.

Love this component, but I am stuck on this for too long, any help would be greatly appreciated. Just not sure why it does not scroll through the data with the parentscroll set.

randym127 – did you solve this issue? I have the same problem

[randym127]

<virtual-scroller [items]="visibleSites" #scroll style="height: 100vh; overflow-x: hidden !important" [parentScroll]="scroll.window"> <div class="container-fluid"> <div site-selection class="row" #container> <dc-site-card *ngFor="let site of scroll.viewPortItems; trackBy: trackByFn" [site]="site" class="col-sm-12 col-md-6" [ngClass]="getColClass()"></dc-site-card> </div> <!--row--> </div> </virtual-scroller> So I am having an issue with multiple vertical scrolls showing up, the component that has the data is in a library and loaded in a SPA application. When I add the scroll.window it does not scroll through the data, it only shows the initial amount of cards. When I remove the parentScroll add the data is loaded properly however there are 2 vertical scrolls. Love this component, but I am stuck on this for too long, any help would be greatly appreciated. Just not sure why it does not scroll through the data with the parentscroll set.

randym127 – did you solve this issue? I have the same problem

I don't have a solution sorry, we ended up pulling this component all together.

[lincolnthree]

@randym127 Can I ask which virtual scroll component you ultimately went with?

[randym127]

@randym127 Can I ask which virtual scroll component you ultimately went with?

We didn't use virtual scrolling at all, we went with paging.

[martinwright]

Make sure it's the window that has the scrollbar and not the body. I had the body scrolling and it wouldn't render new items. After removing:

body {
    overflow-y: scroll;
}

... it worked fine. You might need to remove overflow-y: scroll; from other parent elements too.