当 angular 5 重新呈现大列表时，如何防止 chrome 滚动? [英] How do I prevent chrome from scrolling when angular 5 rerenders a large list?

问题描述

我有一个 ngFors 对其他组件列表的 angular 组件.我正在使用 ngx-dnd 库来启用拖放.每当子组件列表大于屏幕尺寸并且我使用谷歌浏览器时，拖放项目会导致页面向下滚动.如果我进行调试，我可以看到角度渲染导致创建一个新的项目集合，并且从 dom 中剔除旧集合，但是在我的旧集合上方创建新集合时，屏幕滚动到将旧收藏保留在屏幕上.当旧收藏最终被删除时，屏幕会留在页面底部附近的某处.

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.

如何防止 chrome 滚动以将旧 dom 保留在页面上?

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

推荐答案

这是由 chrome 中一个相对较新的特性引起的，称为滚动锚定.这通常是为了防止广告和其他可能加载缓慢的内容在浏览时中断您的观看.

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/滚动锚定

要禁用它，放置一个

style='overflow-anchor: none'

进入你的可滚动div

https://css-tricks.com/almanac/properties/o/溢出锚/

这篇关于当 angular 5 重新呈现大列表时，如何防止 chrome 滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！