Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prevent current scroll position jump after unshifting new items

See original GitHub issue

Set scroll not to the end nor a start of the list to see this clearly. After new items added to the beginning of the scrollable list by unshift-ing the array you would see whole list moved down by the height of the new items. It would be great if current scroll position will remain the same. Or to have an option to do this.

Thank you for this great component! It realy helped me out to deal with large amount of items. PS: i’m implementing mesenger web client for my app at the moment, using ngx-virtual-scroller + perfect-scrollbar(as directive)

Issue Analytics

State:
Created 5 years ago
Comments:27

Top GitHub Comments

1reaction

speigecommented, Jun 13, 2019

@casper5822 Please try version 3.0.2 from npm. I believe I fixed the issue where it was keeping existing item focused even if scrollTop was 0.

1reaction

speigecommented, Jun 10, 2019

@casper5822 your suggestion has some problems. viewPortItems is intended to be readonly. It is what renders the actual items to the screen. By assigning the entire results array to it, you’re disabling virtual scrolling & instead rendering all items.

Sorry I haven’t gotten around to a proper fix yet. I’ve been busy.

Top Results From Across the Web

How can I prevent scroll position jump after a freeze during a ...

Before your calculations begin, you could prevent scrolling on the page and allow it again once the calculations have finished:

Maintaining Scroll Position When Adding Content to the Top of ...

This involves a two step process of: save the current scroll position and scrollHeight of the container; once the new content has been...

Maintaining Scroll Offsets When Adding Content Above The ...

Ben Nadel demonstrates how to maintain scroll offsets when new content is added above the user's viewport in Angular 9.0.0-rc.2.

Content Jumping (and How To Avoid It) | CSS-Tricks

I would argue that shifting the page layout after the initial render (without relevant user interaction) may be the single most unpleasant user ......

Window scrollTo() Method - W3Schools

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP,...