【问题标题】:How do I prevent chrome from scrolling when angular 5 rerenders a large list?当 Angular 5 重新呈现大列表时,如何防止 chrome 滚动?
【发布时间】:2018-02-02 23:01:18
【问题描述】:

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

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

【问题讨论】:

    标签: angular google-chrome


    【解决方案1】:

    这是由 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/

    【讨论】:

    猜你喜欢
    • 2020-05-16
    • 2012-10-17
    • 2023-03-11
    • 2020-02-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-04
    • 1970-01-01
    相关资源
    最近更新 更多