Component: Table with Scroll Height Flex and Virtual Scroll, ScrollBar flickers at the end

[nsaini-05]

Describe the bug

When virtualScroll is set to true on table and scrollHeight is set to flex. Sometimes when scrolling to end (almost bottom) the table flickers and scrollbar thumb goes moves in weird position.

Also rows don't get populated when div is stretched as it should with scroll height flex

Environment

Forked from Flex Scroll Demo from Official Site

Reproducer

https://stackblitz.com/edit/emzgbf?file=src%2Fapp%2Fdemo%2Ftable-flexible-scroll-demo.html,src%2Fapp%2Fdemo%2Ftable-flexible-scroll-demo.scss,src%2Fstyles.scss

Angular version

16.2

PrimeNG version

16.7

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

NA

Browser(s)

Chrome

Steps to reproduce the behavior

Resize the Div

Move scrollbar to bottom

Expected behavior

is should not flick

[certifirm]

I think that the component dispatch multiple time event (onChange) when it's created.

[Gykonik]

I've got the same issue and would love to get any tips on how to resolve it :D

[bountyface]

You can solve the scrolling issue by setting the virtual scroll item size to the height of your rows in pixels. In your example above: [virtualScrollItemSize]="46"

The flickering of the headers should go away if you set the column widths to a fixed value manually.

[john8329]

Virtual scrolling & lazy loading never worked good. I've been trying it since v11, and it's a gamble every time. Each version has something that fails, except maybe v13 with caveats. Not even the example in the documentation works, and the page that shows this precise integration has disappeared too. I've been opening an issue a while ago with perfect reproducibility and it was left unnoticed, no matter how many had the same issue. I'm even trying the LTS versions, which are supposed to be stable, and they have problems as well.