Virtual Scroll Jumping Backwards

[msixfour]

Hi there!

Trying to determine where this issue might be coming from. Been running into an issue with virtual scroll on multiple primeng components (p-table and p-multiselect) where the scroll viewport keeps jumping back several rows upon a certain point in scrolling. It doesn't seem to matter if lazy loading is enabled or disabled. If I physically grab the scroll indicator, I can drag it past the threshold where it would normally jump backwards.

I'm setting the virtual scroll height to be identical to the row heights in the table/multiselect.
Been looking around at the styles are applied and can't see anything out of the ordinary.
Running on latest version of primeng and angular (after seeing the issue exist on older versions of both).

If anyone has run into this behavior, and get help point me in the right direction of where to look next, I would greatly appreciate it. Thank you in advance!

[cetincakiroglu]

Hi,

Could you please share a stackblitz example so we can identify the issue clearly?

[nwkyom]

I forked the previous stackblitz link: https://stackblitz.com/edit/pvudma-phandv

I upgraded the Angular and PrimeNG libraries.
I removed the "rowTrackBy" property by default.
I enabled the 2 tabs with exactly the same table.

As you can observe:

• At startup, the scroll on the "tab1" is erratic (jumping backwards, more visible if you scroll slowly)
• Then go the "tab2", it is working perfectly fine
• Go back to the "tab1", now it is working as well

[Max0nyshchenko]

@cetincakiroglu Hi, here is my demo (slowly scroll down in a p-scroller component to reproduce the bug) https://stackblitz.com/edit/pvudma-fer1u1?file=src%2Fapp%2Fdemo%2Fvirtual-scroll-issue-demo.html
It uses [email protected], the issue is present when there is a p-tabMenu on the page.

Here is the working demo with [email protected] https://stackblitz.com/edit/pvudma-hh5j6j?file=package.json

[dkachanov-scm]

Our project also blocked due to this issue!

[davidwwu]

@Max0nyshchenko I managed to fix it by adding trackBy: https://stackblitz.com/edit/pvudma-mem4lg?file=src%2Fapp%2Fdemo%2Fvirtual-scroll-issue-demo.html

[Max0nyshchenko]

@davidwwu Thanks, it's working, appreciate your help

[dsgnow]

I have the same problem. It seems that if we have a textarea next to a dropdown and pass [autoresize]=true to it, the scroll doesn't work correctly. Here's an example on codesandbox. https://codesandbox.io/s/primeng-dropdown-virtualscroll-demo-forked-8zpqhp?file=/src/app/demo/dropdown-virtualscroll-demo.html

[erber014]

I can confirm that I have a problem with this also. Created an issue here: primefaces/primeng#14003

[tim-wilkins]

This has been an issue since the new Scroller component was introduced, although I've not worked out under what conditions it occurs. You can work-around this by using the append only option, which would help if initial loading is the issue, but not if you've large datasets etc.

[cetincakiroglu]

Hi,

About the virtualScroll in dropdown, we've fixed this issue and it doesn't exist in the latest version.

[cetincakiroglu]

Your example does not start btw, please provide a working example

[dsgnow]

Updated: https://codesandbox.io/s/primeng-dropdown-virtualscroll-demo-forked-8tn6m7?file=/src/app/demo/dropdown-virtualscroll-demo.html

[cetincakiroglu]

@dsgnow

Your example crashes again...

[dsgnow]

I opened the link now and it works, so I don't know what the problem could be.

Here is code to reproduce also:

<div class="card flex justify-content-center">
  <textarea pInputTextarea rows="1" [autoResize]="true"></textarea>
  <p-dropdown
    [options]="items"
    [(ngModel)]="selectedItem"
    placeholder="Select Item"
    [virtualScroll]="true"
    [virtualScrollItemSize]="38"
  ></p-dropdown>
</div>

Just set the virtual scroll to a smaller value, in the example "38" and add next to the textarea with [autoResize]="true"

[cetincakiroglu]

I've tried 2 times again and it crashed. I don't know maybe something related with codesandbox. Trying to reproduce by your code :)

[tim-wilkins]

Does the fix extend to other uses of VirtualScroller/Scroller? It still seems a problem in 16.8.

[cetincakiroglu]

The fix is released with 17.3x it's not available for 16.8 unfortunately

[dsgnow]

Is the described issue scheduled for a fix? I am checking on version 17.0.0-rc-1 and still this problem occurs.

[cetincakiroglu]

Could you please provide a working example so we can identify the issue clearly?

[dsgnow]

https://github.com/orgs/primefaces/discussions/353#discussioncomment-7785221

[cetincakiroglu]

Hi,

Could you please check the example here, I couldn't replicate the jumping behavior https://stackblitz.com/edit/xbtezq?file=src%2Fapp%2Fdemo%2Fdropdown-virtualscroll-demo.html

[cetincakiroglu]

Hi,

I've managed to open the example and I can see that there is a bug with dropdown virtualScroll in the used version. Probably we've fixed the issue in 17.0.0-beta.1 or 17.0.0-rc.1, I can't reproduce the issue in v17,

[dsgnow]

In your example just change

for (let i = 0; i < 1000; i++) {
           this.items.push({ label: 'Item ' + i, value: 'Item ' + i });
       }

to

 for (let i = 0; i < 50; i++) {
            this.items.push({ label: 'Item ' + i, value: 'Item ' + i });
        }

does not work with fewer elements

[cetincakiroglu]

I got your point now, could you please create an issue for that in the repo and tag me so we can address the issue in future releases?

[dsgnow]

Sure ;)

link to issue: primefaces/primeng#14298

[dsgnow]

Are there plans to fix this issue?

[cetincakiroglu]

Hi,

We're having difficulty finding the root cause of the issue. It's a strange behavior that occurs only if autoSize input of textarea is used. It's not even directly related to the virtual scroll.

[eblanford]

After upgrading to v14 I also have had this issue on all of my tables that use virtual scroll and some of my dropdowns and multiselects as well - my project has very large data sets and my tables have 120+ columns, so virtual scroll is a must. I'll have to try and reproduce it on a personal repo.

I've gotten around it on the table by using the rowTrackBy and returning a trackByFunction that returns index. For some reason returning object.rowId does not work, only index. Only catch is I'm migrating to version 16 and this does not work with editable cells, there seems to be a stack overflow on scroll caused by the editable cell - still looking into that.

On the multiselect, I was able to get rid of the issue by adding an ngRowTrackBy function to the p-multiselect item ngForOf loop and do the same thing as I do on tables, this is the only thing I've found that fixes the issue. I had to copy the primeng component to add that one line so it'd be nice if that was added as an input like it is on tables!

[tim-wilkins]

Using a track-by function returning the index does seem to solve most of the problems of this weird scrolling, although in one case with a table I've hit a strange "bouncing off the bottom of the table" effect (i.e. scroll to bottom and it scrolls back up a bit). This is using the 17.3.3.

[eblanford]

I have only seen this behavior when my row height is variable or if my row height does not match the virtualScrollItemSize I defined. Can you verify that this is not the case?

[tim-wilkins]

I've not been using variable height rows and I've made sure that the virtualScrollItemSize is correct when using the scroller by itself. For tables I found a slight discrepancy, 27 rather than 25 pixels, but correcting this didn't make any difference. I'm referring to the general jumping around rather than the bouncing off the bottom. As regards the bouncing off the bottom, I examined the affected code more thoroughly and it didn't include the virtualScrollItemSize at all, so adding that (together with the row track by) means it now works fine. Thanks for drawing my attention to that (I probably would have got back to it eventually).

[cetincakiroglu]

Hi all,

Could you please try after the 17.6.0 release and let me know if the issue persists, I couldn't replicate the issue after the fix primefaces/primeng@652df0c

[tim-wilkins]

I still get the problem (jumping backward) using a Scroller directly and a table with virtual scrolling - I still need to add the track-by attribute/function which does fix it. This is using 17.6.0.

[cetincakiroglu]

Could you please share your use case with a stackblitz example so we can also see your case and investigate what's wrong?

[tim-wilkins]

It's part of a pretty large application so I'm not sure if I can make an isolated example.

[tim-wilkins]

I've tried to produce a simple application to show the problem, but it all works properly. I'm not able to send you the application showing the problem because there are a few linked applications and a database etc. If I get any further I'll get back to you.

[dsgnow]

I don't know if it happened in the latest version but also p-TabMenu if it is next to p-dropdown with lazy load (up to 200 items) makes it impossible to scroll. I would post an example but the link from the documentation to p-tabMenu doesn't work (stackBlitz builds, but this component doesn't display). After more investigation, I was able to determine that the p-highlight class is responsible for this, which gets the clicked item in p-tabMenu and this messes up the scroll in the dropdown. When I remove p-highlight class everything works fine.
“.p-tabmenu .p-tabmenu-nav-content li.p-highlight”

[RafalN8]

I don't know if it happened in the latest version but also p-TabMenu if it is next to p-dropdown with lazy load (up to 200 items) makes it impossible to scroll. I would post an example but the link from the documentation to p-tabMenu doesn't work (stackBlitz builds, but this component doesn't display). After more investigation, I was able to determine that the p-highlight class is responsible for this, which gets the clicked item in p-tabMenu and this messes up the scroll in the dropdown. When I remove p-highlight class everything works fine. “.p-tabmenu .p-tabmenu-nav-content li.p-highlight”

After reading this message, removing the usage of tabMenu for a while and checking the differences in between versions 17.13 and 17.14 I found out that this change might cause the issue:
primefaces/primeng#15269
I "reverted" the change done under this fix by overriding the script and spotted "jumping" issue no more.

[FMorrison87]

For people having this issue and looking for an answer. I don't have a fix, but I wanted to let people know what makes it happen 100% of the time. I am working on an application on Angular 17.0.4 and primeNG 17.16.0. I cannot post a Stackblitz (I know I will be asked). Using p-table, not using anything lazy, but using virtualScroll and virtualScrollItemSize set through a getter. When the table is nested within p-tabMenu or p-tabView, and once the table hits a threshold of items for the virtualization to kick-in (this is ~34 items for my viewport height) the rubber-banding scroll effect where the table loops continuously happens every time at a slow scroll speed (about slow enough to visually scan table items). I had a duplicate table that was not nested in tabs in another part of the app with the exact same structure that does not have this issue with virtual scroll. I even swapped it into the spot with the tabs, and then it had the problem. So it looks like this is a problem when using virtual scroll on a table nested within tabs.

@nwkyom actually posted a stackblitz that shows the issue exactly within tabs, and even how swapping tabs, scrolling, and then swapping back to the original tab 'fixes' the issue. PrimeFaces folks, hopefully that is something to go on when looking for the issue. For my case, I am removing virtual scroll from production in all instances where it is nested in tabs, which is not ideal as I don't know how much data is going to hit these tables, but they can't be read by the user when the rubber-banding effect happens.

[Avcharov]

Hello, i have the same issue with table "jumping" after scroll using virtualScroll for p-table.
I tried for 3 versions and it was not fixed in any of them: 16.9.0; 17.12.0 and 17.18.9.

[bennettpeter]

I had this problem with large tables. I have fixed it by doing the following:

Make sure all rows have the same height. Some rows with long text were wrapping the text and causing the row height to be more.

CSS:

.mycell {
    position: relative;
}

.mytext {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Table:

<p-table .... [virtualScrollItemSize]="42" ...
<tr style="height: 42px">
...
<td class="p-1 overflow-hidden">
    <div class="mycell">
        <div class="mytext">{{program.SubTitle}}</div>
    </div>
</td>

Then run your application and examine your layout in the browser debug option (ctrl-shift-i). Check that the height of each row is 42 pixels. Some themes cause the height to be more. Avoid thos themes. Make sure the nested div containers are used on every cell with contents that could overflow onto more than 1 line.

With these changes scrolling is perfect, no more jumping around and no more losing the last rows in the table.

[xanderknox]

Almost a year later, can confirm this issue is still very much persistent on version 17.18.11.

Using a p-dropdown inside of a p-tabMenu. Strangest part is that scrolling UP works, scrolling down is what makes it erratic. It scrolls upward instead at an incredible speed.

[rmorris-gnrc]

I'm having the same issue. But it seems that the p-dropdown doesn't even need to be inside of the p-tabMenu. Just having the p-dropdown inside of the same component as a p-tabMenu seems to cause the issue. We are seeing this issue on 17.18.11. I am not able to replicate this issue on our previous version - 16.9.1.

[harryKont]

We are also facing the same issue, when using p-table with virtual scrolling. It seems to be more prominent if the user uses infinite scroll to quickly jump to the bottom of the table.

[davidwwu]

I'm using p-table component in PrimeNg v.15.4.1 and the issue happens when the table size is large (our table goes over 20k rows but I think it started happening with 1k+ rows). My virtualScrollItemSize is set correctly but didn't have the rowTrackBy property set. Setting it according to https://github.com/orgs/primefaces/discussions/353#discussioncomment-10081887 works for me.

Here's a working example: https://stackblitz.com/edit/pvudma-mem4lg?file=src%2Fapp%2Fdemo%2Fvirtual-scroll-issue-demo.html Try taking out the trackBy to see the original issue.

[gsUp2000]

I am using the p-table in my application and I am running into the same issue of the scrollBar jumping backwards. I am also using the lazyLoadEvent to call on more data but when I set the rowTrackBy function I am running into an error that the lazyLoadEvent is not triggered. And many a times the scroller would be at the end of data. Is anyone else facing this issue. And if yes how to solve it ?
And why is the lazyLoadEvent is triggered at the generation of table?
PrimeNg version: 17.18.11
Angular version: 18.2.0

[alex-mirankov]

For those still struggling with the issue, I faced a similar problem while using p-treeSelect. I properly configured heights, but it didn't resolve my problem. Then, I started to experiment with the virtualScrollOptions property. After inspecting the source code, I figured out that in some cases, the height is calculated incorrectly, and a flag isRangeChanged is set to true. One way to not calculate this flag and not invoke scroll logic is setting appendOnly to true in the virtualScrollOptions property. This solved the issue with the scrolling jump, hope you find it useful in your case

PrimeNg version: 17.18.12
Angular version: 17.3.12

[heidewitzkaa]

Thanks for the tip. This fixed my issues with both the tree-select and the table.

[AquariusFR]

I was struggling with a similar issue :
i've got
1 multiselect with virtualscrolling inside
1 table with frozenColumn enabled.

the glitch was on multiselect.
By adding appendOnly: true to my multiselect, it solves my issue.

Thanks a lot.

[gianluca-moro]

For our application where we are using a table with virtual scrolling and multi selection, we had to add trackBy to the virtualScrollOptions. Using appendOnly broke the multi select using shift+click.

[virtualScrollOptions]="{trackBy: trackByIndex}"

trackByIndex(index: number): number {
  return index;
}

Edit: It actually didn't fully solve our issue. It works locally on MacOS but not on Windows.

[jakubbialas]

I struggled with the problem for 3 days, and I found something that worked for me. Just add this css:

.p-scroller {
	overflow-anchor: none;
}

[TrustNoOneElse]

Thank you thats work greatly, this work also without the appendOnly option, what is important for us.

[leobarduzzi]

worked in v14, thanks!

[luka2210]

It doesn't solve the issue for me, I'm using primeng v17.

[IharMrachko]

Hi, All! Try for primeng v13 p-table
::ng-deep cdk-virtual-scroll-viewport {
transform: none !important;
will-change: auto !important;
}

[Et3rnal]

I have this issue, I noticed when I increased the scrollHeight it doesn't happen (I didn't have a huge list, nothing lazy etc..) so I applied a small delay and I found it works just find now [delay]="50"
I got inspired from ready some of analysis here so thanks, I didn't read it all in-case someone already mentioned it.

[gianluca-moro]

We had a similar issue with our p-table (PrimeNG v19.0.10) displaying multiple thousand entries and using virtual scroll.

I was able to fix it by using a combination of things other users have suggested here:

<p-table 
  ...
  [virtualScrollItemSize]="43"
  [virtualScrollOptions]="{trackBy: trackByIndex, autoSize: false, delay: 0, itemSize: 43}"
  [virtualScrollDelay]="0"
  ... >

trackByIndex(index: number): number {
  return index;
}

.p-virtualscroller {
  overflow-anchor: none !important;
}
.p-scroller {
  overflow-anchor: none !important;
}

Also, I had to get rid of the dataKey property on the table because that was causing some issues with the multi-selection.

[Et3rnal]

your CSS seem to fix it, I didn't try with huge list yet but even without trackby and delay, CSS seems to prevent the jumping! thanks for sharing

[milan0207]

Your CSS fixed it for me too. thank you very much.

[Borris123]

I ran into a strange bug with p-table using virtualScroll with more than 10,000 rows.
When scrolling quickly to the bottom (especially using the scrollbar/dragging), the last rows contained undefined values.
If I scrolled slowly, the values were displayed correctly.

After debugging, I discovered the cause:
If you don't explicitly set

[sortMode]="null"

PrimeNG internally applies its own sorting logic on your data when virtualScroll and lazy loading are enabled.

Solution / Workaround:
Explicitly set sortMode="null" on your p-table when you manage sorting yourself or don't want internal sorting. This prevents PrimeNG from reordering data and fixes the issue.

[paolobarto]

If you're looking into this issue because of scroll issues with updating data in place, add trackBy. It will only update elements in place rather than a full re-render.

It might not fix every issue, but it's importance in the context of lazy loading is understated.

[StephenSPaul]

I don't know if this will help anyone but I was experiencing this with the virtual scroll on the p-tree. If your list item heights (when inspected in the browser devtools) seem to correctly match that defined in virtualScrollItemSize then it is probably be the gap between the list items that is causing the problem.

In my case, I removed this gap in my global stylesheet (because ng-deep is dangerous, and PrimeNG provides no mechanism to remove this gap):

my-component {
  .p-tree-root-children, .p-tree-node-children {
    gap: 0;
  }
}

[leticiatomasio]

Just adding this global css fixed it for me in p-multiselect with lazy load:

.p-virtualscroller {
  overflow-anchor: none !important;
}

.p-scroller {
  overflow-anchor: none !important;
}