Virtual Scroll For angular 4 Variable/Dynamic height images

Question

I am implementing a feed screen like twitter that contains images and text. I am using angular 4. Currently I am using Virtual Scroll to improve performance when user scrolled deep like 100 items. My problem is in my list all items have variable size and this library does not completely support dynamic height. Like need some minimum fixed height. That cause flickering in mobile devices and some browsers. I want to implement React Js Virtual scroll with Angular if its possible. Can any one suggest me any solution so my feed list become smooth.

Solution 1

As ngx-ui-scroll is supporting all required functionality like variable height content. I suggest to all use this if you really want to overcome this problem.

Solution 2

If you don't want to use third-party libraries and go with Google Material, do this (for Angular 7.2):

import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';

and put both in the module's imports. Set on <cdk-virtual-scroll-viewport> a height by CSS (might be calc(100vh - 50px) for example, if you want to exclude a header of 50 px and fill the screen) and itemSize="10" (or any other small number, it just works).

And on the iterated item set [style.height]="'auto'".

Keep in mind some features will not work with this, like scrolling to an item or infinite scroll (because the number of visible items is calculated by itemSize and you don't know it precisely, unless you start measuring every item and calculate the mean which is way too hacky for me personally)

Source: https://github.com/angular/material2/issues/10113

Comments

[Corey Cole]

@davidvalentino did you try setting the infinite mode to true? It makes it much smoother when scrolling back to already-rendered elements dhilt.github.io/ngx-ui-scroll/#/#infinite-mode

[StefansArya]

the DOM element keep increasing when use infinite mode