我有一个Angular组件，使用ngx-dnd库启用拖放功能。这个组件遍历其他组件的列表。每当子组件的列表大于屏幕尺寸且我在使用Google Chrome时，拖放一个项目会导致页面向下滚动。如果我进行调试，我可以看到Angular渲染会创建一个新的项目集合，并从DOM中删除旧的项目集合，但是当新的项目集合在旧的项目集合上方被创建时，屏幕会滚动以保持旧的项目集合可见。当旧的项目集合最终被删除时，屏幕停留在页面底部附近。
如何防止Chrome自动滚动以保持旧的DOM元素在页面上？
1个回答
16
这是由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/
- Jon B
2
不错的发现，这也帮助了我解决我的div问题！这里是Mozilla，它展示了兼容性，也适用于那些在各种浏览器上测试其应用程序的人：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring#Browser_compatibility - aonepathan
我遇到了同样的问题，但不幸的是这个方法对我并没有起作用。 - Manuel Brás
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接