5

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.

Rakesh
  • 935
  • 1
  • 11
  • 29
  • Your goal is just to remove / add on your DOM your item base on scroll position ? Do you need to keep track who have current "focus" ? i have solve same issue on my current project and is big nightmare to manage async image download. – Yanis-git Mar 26 '18 at 13:21
  • Yes, and I don't need to keep track of current focus. – Rakesh Mar 26 '18 at 13:38
  • ok will prepare you code sample when i will have free time :) – Yanis-git Mar 26 '18 at 14:15
  • 1
    @Rakesh May I ask you to look at [ngx-ui-scroll](https://github.com/dhilt/ngx-ui-scroll)? We just had the first release (yesterday). Previous (AngularJS) version of the lib covered different items height use-case. The new version had not been tested with different heights, but there is a good chance that it does work out-of-box for simplest cases. Anyway we definitely want this functionality to be in [ngx-ui-scroll](https://github.com/dhilt/ngx-ui-scroll), and if you could try it and maybe draw an issue in the repository... – dhilt Mar 27 '18 at 00:34
  • @dhilt I tried [ngx-ui-scroll](https://github.com/dhilt/ngx-ui-scroll) but get error in integration. I logged an issue. – Rakesh Mar 27 '18 at 05:02
  • @Rakesh Thanks for your participation! The fixed version has been just released, so you can make another try. – dhilt Mar 27 '18 at 11:19

2 Answers2

3

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.

Rakesh
  • 935
  • 1
  • 11
  • 29
  • 1
    @davidvalentino did you try setting the infinite mode to true? It makes it much smoother when scrolling back to already-rendered elements https://dhilt.github.io/ngx-ui-scroll/#/#infinite-mode – Corey Cole Oct 01 '18 at 20:12
  • the DOM element keep increasing when use infinite mode – StefansArya Jan 11 '19 at 01:38
3

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

Phil
  • 5,442
  • 6
  • 36
  • 70