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

130 questions
21
votes
7 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
  • 13,807
  • 14
  • 91
  • 127
19
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
  • 13,912
  • 34
  • 100
  • 166
18
votes
5 answers

Angular: 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,781
  • 3
  • 20
  • 33
17
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…
Mateut Alin
  • 1,173
  • 4
  • 17
  • 34
12
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
  • 4,379
  • 1
  • 15
  • 58
10
votes
4 answers

Angular Virtual Scroll with dynamic variable height/width?

I'm looking for an angular virtual scroll package with following functionality: 1) Horizontal virtual scroll 2) Container width and height are fluid. 3) Items width set in percentage of the container width. 4) Items can be minimized during…
Itai
  • 387
  • 1
  • 7
  • 15
10
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
  • 920
  • 11
  • 18
9
votes
4 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
  • 3,443
  • 3
  • 32
  • 48
9
votes
4 answers

cdk-virtual-scroll-viewport,Any way to solve the blank area when user is scrolling quickly?

Especially obvious at the mobile.it will refresh immediately whenever the user scrolls, if user is scrolling quickly, it is hard to render?
rorry
  • 111
  • 1
  • 3
9
votes
4 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
  • 14,487
  • 12
  • 48
  • 70
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,930
  • 6
  • 46
  • 69
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
  • 626
  • 1
  • 7
  • 19
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
7
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
  • 121
  • 2
  • 6
6
votes
1 answer

How to make virtual scroll?

Please teach me how to make a virtual scroll. I use HTML, JS, Vue. I tried using vue-virtual-scroll, but since it is difficult to change it to the function I want, I'm going to make a basic part and apply it. Please tell me how to make a basic…
tail
  • 105
  • 1
  • 1
  • 9
1
2 3
…
8 9