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
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. …
whereJERRY
  • 95
  • 1
  • 6
5
votes
1 answer

Angular cdk-virtual-scroll-viewport mouse scrolling not working in horizontal orientation with mouse wheel only

Is there any way to activate mouse scrolling in the cdk-virtual-scroll-viewport for the horizontal orientation? As we can also see in the example from angular material, you can scroll only by dragging from the scrollbar, but you can't scroll just by…
uzzi
  • 551
  • 2
  • 9
  • 29
5
votes
1 answer

How to get triggered on scrolling inside cdk-virtual-scroll-viewport?

I'm using virtual scroll with Angular 7. I create a CdkVirtualScrollViewport and I would add a listener to every scroll event. I mean I would like to be notified on scrolling inside that viewport. I tried to inject scrollDispatcher in my component,…
smartmouse
  • 13,912
  • 34
  • 100
  • 166
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
  • 1,035
  • 1
  • 14
  • 31
4
votes
1 answer

Vue - virtual scroll for table

I'd like you to recommend me a package that can take advantage of a virtual scroll / recycler scroll for a table in Vue. I tried these two…
Dusan
  • 3,284
  • 6
  • 25
  • 46
4
votes
1 answer

How to use vue-virtual-scroller with Element UI Table?

I use Element UI Table in a project and wondering how I can use vue-virtual-scroller with it. I couldn't figure out a way because in all virtual-scroller examples I saw, it was expected(as expected) that the loop is run on the list item or a table…
Praveen Puglia
  • 5,577
  • 5
  • 34
  • 68
4
votes
2 answers

How to combine cdkVirtualScroll with cdkTable?

I'm looking for a working virtual scroll table with fixed headers, so I found the Cdk which is great but the documentation is really difficult to follow. At the moment I'm trying to combine the CdkTable with CdkVirtualScoll. All working examples I…
Lars
  • 920
  • 1
  • 14
  • 34
4
votes
1 answer

Angular cdk scrolling: Updating Data Source not represented in view

All my previous attempts of building an infinite scroller failed so far. The component I am currently working on uses Angular's virtual scrolling and should update the data source when a certain index of the virtual scroll viewport is reached. While…
Rustius
  • 173
  • 1
  • 4
  • 14
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
  • 238
  • 2
  • 13
3
votes
3 answers

How to prevent/stop scrolling on ngx-virtual-scroller on items replace?

I'm using ngx-virtual-scroller with a additional toggle component on top. On user toggle additional items are added to virtual scroller. This results in automatic scroll behaiviour, if items which are added are before current position. If the user…
Juri
  • 1,531
  • 2
  • 20
  • 43
3
votes
1 answer

How to test an infinite scroll component in Cypress

I have an dynamically loaded table based on an infinite-scroll component. I can test the loaded items as follows, but only 20 items are loaded at a time. How can I repeat until the 500th item comes into view without repeating the code 100…
Jane Datton
  • 33
  • 3
3
votes
0 answers

how to overflow horizontally out of position relative with vertical scroll-bar (create popover inside ngx-virtual-scroller)

I have a sidebar with a vertical virtual scroll. Whenever I hover over an item in this scroll container, a popover show up, giving more information about the item (for example in the container a name is ellipsed because the container is not wide…
Stoffel
  • 233
  • 2
  • 13
3
votes
1 answer

Can't bind to 'items' since it isn't a known property of 'virtual-scroller'

I am having an issue with getting virtual scroll implemented into my ionic 4 + Angular project. Previously, I have used ionic's implementation of virtual scroll (ion-virtual-scroll) which was working great initially but ran into a arguably big…
TheNakedFlame
  • 151
  • 2
  • 9
3
votes
1 answer

CDK Infinite scroll end checking

im trying to implement infinite scroll for loading items on to the list dynamically when user scrolls down the list, but when i access the end and total , it is coming as same, i need to check if the last item is reached and then append new items to…
BLACKMAMBA
  • 675
  • 2
  • 11
  • 28
3
votes
1 answer

Angular virtual scroll reset to top

In my Angular app, I'm using the Virtual Scroll from the Angular cdk. This is my Component's template:
1
2
3
…
8 9