【问题标题】:Angular 6 - Keep scroll position when the route changesAngular 6 - 路线改变时保持滚动位置
【发布时间】:2019-01-23 16:31:08
【问题描述】:

以前的行为:

更改路线或导航路径不会影响导航到另一条路线时的滚动位置。即内容可以在不改变滚动位置的情况下改变。

当前行为:

更改路线会让您回到页面顶部。

到目前为止已完成的操作:

在当前和全新的 Angular 6 项目上测试

这是一个错误吗?功能变化?还是我缺少一个参数。

【问题讨论】:

    标签: angular angular6


    【解决方案1】:

    似乎将'scrollPositionRestoration'设置为禁用修复它

    RouterModule.forRoot(
      appRoutes,
      { scrollPositionRestoration: 'disabled' } // <-- HERE
    )
    

    https://angular.io/api/router/ExtraOptions

    【讨论】:

    • 根据该链接,'disabled' 是默认值,显式添加此选项会做什么尚未完成?
    【解决方案2】:

    路径改变后滚动位置不会改变。这始终是 Angular 的默认行为。

    但是,许多开发人员手动执行window.scroll(0, 0) 来覆盖此行为。

    我建议您检查您的代码中的某些内容是否正在执行此操作。因为它可能是新安装的 3rd 方库或其他开发者的代码提交。

    另外,根据以下官方文章:

    Angular v6.1 Now Available — TypeScript 2.9, Scroll Positioning, and more

    有一个新选项可以使用

    来保持原始滚动位置

    RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})

    我相信这与您所问的问题没有直接关系,而只是一些很好的了解。

    【讨论】:

    • 使用 scrollPositionRestoration: 'enabled' 它肯定会恢复你点击后退按钮时的滚动位置,而不是路由。感谢您提供的信息 =)
    【解决方案3】:

    如果它不适用于 ScrollPositionRestoration:'enabled' 配置,请使用容器的 [scrollTop] 属性绑定并分配值

    【讨论】:

    • 分享您的代码示例以便更好地理解。
    • 如果滚动恢复不起作用,创建一个服务,在该路由更改时更新当前滚动位置,并将滚动位置分配给新路由组件在 ngOnit 上的该服务滚动位置并重置服务滚动。
    【解决方案4】:

    如果滚动恢复不起作用,则创建一个服务,该服务在该路由更改时更新当前滚动位置,并将滚动位置分配给 ngOnit 上的该服务滚动位置以用于新路由组件并重置服务滚动。

    【讨论】:

      猜你喜欢
      • 2023-03-20
      • 2020-04-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-03-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多