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
2
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
  • 11,808
  • 26
  • 77
  • 154
2
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…
2
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
  • 113
  • 6
  • 13
2
votes
1 answer

Angular Virtual Scroll works fine on browser but fails Jasmine test on initialization

I tried to incorporate Angular Virtual inside one of my component and it works fine as intended on browser. However, when I try to write the test case for the same, the Karma runner throws the following set of error while initializing the…
Laxminarayan
  • 76
  • 1
  • 6
2
votes
2 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
  • 41
  • 3
2
votes
1 answer

Angular 7 - virtual scroll combined with async subscription

I am using async in my Angular 7 project to automatically subscribe my data I want to display. The data is displayed as a table with about 2000 items. The following code is from my template:
student18
  • 498
  • 7
  • 22
2
votes
1 answer

Adding item at top of a list using Angular UI-Scroll

I am using Angular UI scroll. The example I am following is this one . It has a demo page here. It has a function to add a list item at specific position. Following is the excerpt of the code: $scope.addToList1 = -> …
van
  • 622
  • 15
  • 25
1
vote
0 answers

Use Angular Virtual Scrolling with a ui5-table web component having a sticky header

When I use Angular Virtual Scrolling with a ui5-table web component having the sticky-column-header flag set to true the column headers move to the bottom when scrolling down (randomly jumping between). In my setup I use 100 entries and 3 columns…
FelixD
  • 35
  • 5
1
vote
2 answers

How to track and save the last scroll position of a virtual scroll list in javascript

I have a virtual scrolling list built with JS in a Cordova app and I want to save the exact node that was at the top of the viewport after each scroll. The complication with virtual scroll is that using scrollTop is not reliable because nodes are…
Uche Ozoemena
  • 383
  • 2
  • 4
  • 10
1
vote
1 answer

Angular Virtual scroll performance issue on overriding scrollbar styles

I'm using cdk-virtual-scroll-viewport to apply virtual scrolling. Unfortunately, after applying styles to the scrollbar, scrolling is not smooth anymore. The native (right side) scrollbar is flashing but it's moving smoother. Tested on…
1
vote
0 answers

List switching slow and ripple effect lag

I've been struggling for a (very long) while on performance issues on my app, that concern list switching with segment buttons. I'm using virtual scroll to improve perfs, because a ngFor loop was insanely slow with only 200 elements. In my…
1
vote
1 answer

Using ngx-virtual-scroller with sections of items

I want to use ngx-virtual-scroller for sections of items.
{{group.name}}
RoG
  • 167
  • 2
  • 15
1
vote
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…
1
vote
1 answer

Can I use the lazy-option of the Angular PrimeNG treeTable without virtual scroll?

Hey guys i stumbled about some problems with the lazy loading option of the prime ng treeTable. I need to use the lazyLoad event (Output property "onLazyLoad") without the virtual scroller behavior. Is this somehow supported by the treeTable…
1
vote
0 answers

ionic 4 virtual scroll not setting height inside container

So, I have created a layout for a page which contains a Header and a button, and below an ng-container in which the ion-virtual-scroll is being rendered. However, the last elements are not being displayed because I can't scroll to their location,…
Miguelopezv
  • 571
  • 1
  • 7
  • 23