How do I prevent chrome from scrolling when angular 5 rerenders a large list?

Question

I have an angular component that ngFors over a list of other components. I'm using the ngx-dnd library to enable drag an drop. Whenever the list of child components is larger than the screen size and I'm using google chrome, dragging and dropping an item causes the page to scroll down. If I debug, I can see that the angular rendering is causing a new collection of items to be created, and the old collection is culled from the dom, however while that new collection is being created above my old one, the screen is scrolled to keep the old collection on screen. When the old collection is finally deleted, the screen is left somewhere near the bottom of the page.

How do I prevent chrome from scrolling to keep the old dom on the page?

Answer 1

This is caused by a relatively new feature in chrome called scroll anchoring. It's generally to prevent ads and other things that may load in slowly from interrupting your view while browsing.

https://developers.google.com/web/updates/2016/04/scroll-anchoring

To disable it, place a

style='overflow-anchor: none'

into your scrollable div

https://css-tricks.com/almanac/properties/o/overflow-anchor/