I have a large set of data that needs virtual scrolling and I use PrimeNg v13.4.0 with angular/cdk v13.3.7. I have exactly the same issue with PrimeNg demo. When scrolling down, the sticky header works well, but when scrolling up, it start jumping, the faster scroll, the bigger jump. Does anyone has any solution for this?
Add a comment
|
3 Answers
This issue and its pull request is added to version 13 future milestone which has no due date. https://github.com/primefaces/primeng/milestone/175
For now you can do this solution:
If you slow down the wheel speed of the cdk-virtual-scroll-viewport, even slightly,
The thead works as it should without any jumping.
changeWheelSpeed(container, speedY) {
var scrollY = 0;
var handleScrollReset = function() {
scrollY = container.scrollTop;
};
var handleMouseWheel = function(e) {
e.preventDefault();
scrollY += speedY * e.deltaY
if (scrollY < 0) {
scrollY = 0;
} else {
var limitY = container.scrollHeight - container.clientHeight;
if (scrollY > limitY) {
scrollY = limitY;
}
}
container.scrollTop = scrollY;
};
var removed = false;
container.addEventListener('mouseup', handleScrollReset, false);
container.addEventListener('mousedown', handleScrollReset, false);
container.addEventListener('mousewheel', handleMouseWheel, false);
return function() {
if (removed) {
return;
}
container.removeEventListener('mouseup', handleScrollReset, false);
container.removeEventListener('mousedown', handleScrollReset, false);
container.removeEventListener('mousewheel', handleMouseWheel, false);
removed = true;
};
}
implement it in the ngAfterViewInit function:
ngAfterViewInit(): void {
const el = document.querySelector<HTMLElement>('.cdk-virtual-scroll-viewport');
this.changeWheelSpeed(el, 0.99);
}
3 Comments
Hoàng Nguyễn
Thanks, this works pretty well. By the way, virtual scrolling blocks rowGroup feature, do you have any idea how to have rowGroup working with virtual scrolling?
Gabriel Câmara
If you're here in 2023, this solution works if you use the scrollwheel or trackpad, but it won't work if you click on the scroll bar and drag it up and down, we still see the boucing/flickering.
Umang Pachaury
Any updates on a solution because still in version 17.18.11 the issue still persists
Try track by index:
html
<p-tree
[value]="value"
[virtualScroll]="true"
[trackBy]="trackByIndex"
[(selection)]="selection"
[virtualScrollItemSize]="50"
scrollHeight="55vh">
</p-tree>
ts
trackByIndex(idx: number): number {
return idx;
}
Comments
In my case, i remove this propety [virtualRowHeight] and i should this bug, the version of PrimeNG is 17.18.9
1 Comment
Community
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.