when scroll is too fast, white screen appear in angular [closed]

Question

I've been testing this on chrome. During long scrolls data start disappearing from the screen and come back in a few seconds. Is there any solution for this issue.

thanks,

Answer 1

This kind of behavior is seen when you have heavy or very large data that generates view out of it and keeps re-rendering from top to bottom everytime whenever you populate more and more data further. How about using Infinite scrolling or virtual scrolling.

1. If you use infinite scroll, then you need to call for fixed amount of data per page or set. While you bring next data try to remove previous list which was shown already and so on. This can be handle on scroll event, achievable but coding must to be tricky. For detail: https://www.npmjs.com/package/ngx-infinite-scroll

2. Virtual scroll gives the look and feel like you are scrolling long list of data but the real scene behind is that it uses some limited number of data that can be fit on your view, are used to render the list which becomes very light and quickly rendered. But again you need to know fix amount of data will be on shown per view. Also you need to bring all the data at once in advance. For detail: https://www.npmjs.com/package/angular2-virtual-scroll