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.
6
-
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– Yanis-git2018-03-26 13:21:22 +00:00Commented Mar 26, 2018 at 13:21
-
Yes, and I don't need to keep track of current focus.Rakesh– Rakesh2018-03-26 13:38:54 +00:00Commented Mar 26, 2018 at 13:38
-
ok will prepare you code sample when i will have free time :)Yanis-git– Yanis-git2018-03-26 14:15:12 +00:00Commented Mar 26, 2018 at 14:15
-
1@Rakesh May I ask you to look at 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, and if you could try it and maybe draw an issue in the repository...dhilt– dhilt2018-03-27 00:34:51 +00:00Commented Mar 27, 2018 at 0:34
-
@dhilt I tried ngx-ui-scroll but get error in integration. I logged an issue.Rakesh– Rakesh2018-03-27 05:02:00 +00:00Commented Mar 27, 2018 at 5:02
|
Show 1 more comment
2 Answers
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.
2 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
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)
