Stack Overflow
Stack Overflow

Questions tagged [virtualscroll]

A UI technique dedicated to increase the performance of large scrollable lists by rendering only a small portion of the data at a moment and virtualising other parts of the dataset, so that the scrollbar parameters remain consistent and a user experiences the result interface close to the original one (without virtualisation)

enter image description here

97 questions
15
votes
2 answers

Angular virtual scroll: append new items when reaching the end of scroll

I would like to use virtual scroll on my Angular application. The items in my list are the result of a remote paged search. I would like to load more results (call the next page) every time I reach the end of the viewport scrolling down. Here is my…
smartmouse
  • 11,808
  • 26
  • 77
  • 154
14
votes
1 answer

How to programmatically scroll to item with angular's material virtual scroll?

I have a list that has many items and each item can be selected. For this I use Angular Material Virtual Scroll. When an item is selected, the selected item is highlighted and then is saved on the server. When I refresh the page, the selected item…
MTZ
  • 823
  • 2
  • 14
  • 23
11
votes
5 answers

cdk-virtual-scroll-viewport with variable item heights

I would like to use cdk-virtual-scroll-viewport in a TimeLine view with items of different heights. So setting itemSize="x" which, according to the documentation refers to The size of the items in the list (in pixels), is unpractical. autosize is…
yglodt
  • 11,334
  • 13
  • 74
  • 114
9
votes
4 answers

Scroll algorithm -- improving fetch and display of data

I would like to set out somewhat of a theoretical problem. Suppose that I have an infinite scroll, implemented something like as described here: https://medium.com/frontend-journeys/how-virtual-infinite-scrolling-works-239f7ee5aa58. There's nothing…
samuelbrody1249
  • 2,819
  • 4
  • 18
8
votes
4 answers

cdkVirtualFor not rendering new items

I'm building a vertically scrolling calendar. I'm getting the initial days to load, but when new days are added to the list, they aren't being rendered.
Will Luce
  • 1,497
  • 1
  • 16
  • 30
8
votes
1 answer

cdk virtualscroll with mat-grid-list

Is there a virtual scroll implementation that works with the grid-list? I think the default implementation won't work because each row should have an element around it. I'm using the grid-list to display profile pictures, and need an infinite scroll…
Elger Mensonides
  • 6,373
  • 4
  • 42
  • 60
8
votes
1 answer

How to use cdk-virtual-scroll-viewport for table tbody

since html parse tr then td, using breaks the view is there any cdkVirtualScrollViewport as directive for ?
david valentino
  • 783
  • 9
  • 16
7
votes
3 answers

Scroll to bottom with cdk-virtual-scroll (Angular 8)

Goal Display a list of messages and scroll to the bottom when a new message is received, even when I am at the top. I would like to scroll fully bottom even with elements of different heights. Problem With virtual scroll, I have to set the…
adrisons
  • 1,923
  • 1
  • 16
  • 28
7
votes
3 answers

How to set the initial index (position) for the CdkVirtualScrollViewport in Angular 7

I need the inital position of the cdk-virtual-scroll-viewport to be other than the first element / item of the list. Now I found the scrollToIndex and scrollTo methods, but I only can get them to work when using it in the ngAfterViewChecked, which…
Dalie
  • 566
  • 3
  • 18
7
votes
3 answers

virtual scroll on Angular 7 is not visible - the height is zero by default

Scenario: Tried a basic virtual scroll test reading this blog post the array had lots of items there was no error the list loaded in a virtual scroll but the height of it was 0 by default quick fix was to set the height for…
Akber Iqbal
  • 12,257
  • 11
  • 34
  • 52
7
votes
1 answer

ionic 4 virtual scroll not working

I created new project with Ionic 4. I have an array of item (spaces) in typescript file and I want to show them in template file by Ionic virtual scroll:
Nhan
  • 71
  • 1
  • 2
6
votes
0 answers

Virtual scroll in angular 6 with material table

I wanna use a virtual scroll with the angular material table. and I don't want to use pagination function. my code is like below. …
이상현
  • 95
  • 1
  • 6
6
votes
2 answers

How can I make an virtual scroll with angularJS?

I'm trying to make a directive that I can do a virtual scroll, so as the user scrolls the table, the table remove "old" views and add "new" views, kind like of collection repeat but I've been failing, I think I didn't understand the math behind it,…
João Pedro Segurado
  • 111
  • 2
  • 6
5
votes
2 answers

Virtual Scroll For angular 4 Variable/Dynamic height images

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…
Rakesh
  • 935
  • 1
  • 11
  • 29
4
votes
0 answers

Is it possible to use CDK Virtual Scroll Viewport with CDK A11y - ActiveDescendantKeyManager?

I am using with a fixed items size for virtual scrolling. Furthermore I use ActiveDescendantKeyManager provided by CDK A11y to move with the arrow keys inside the viewport. When I try to use both of them I have the…
MichaelShake
  • 108
  • 8
1
2 3 4 5 6 7