我有一个Angular组件,使用ngx-dnd库启用拖放功能。这个组件遍历其他组件的列表。每当子组件的列表大于屏幕尺寸且我在使用Google Chrome时,拖放一个项目会导致页面向下滚动。如果我进行调试,我可以看到Angular渲染会创建一个新的项目集合,并从DOM中删除旧的项目集合,但是当新的项目集合在旧的项目集合上方被创建时,屏幕会滚动以保持旧的项目集合可见。当旧的项目集合最终被删除时,屏幕停留在页面底部附近。
如何防止Chrome自动滚动以保持旧的DOM元素在页面上?
这是由Chrome中的一个相对较新的特性引起的,称为滚动锚定。通常用于防止广告和其他可能加载缓慢的内容在浏览时打断您的视图。
https://developers.google.com/web/updates/2016/04/scroll-anchoring
要禁用它,请添加
style='overflow-anchor: none'
将其添加到您的可滚动 div 中
https://css-tricks.com/almanac/properties/o/overflow-anchor/