12

在过去的两天里，我一直在通过 internetz 挖掘关于将片段滚动到有角度的视图中。

假设我们有一个静态网页，其中包含一堆充当片段的 id-s。并有一个侧导航栏来浏览带有链接的片段。

我试过路由器anchorScroll，只是将它添加到模块中对我没有任何作用。它只是为您提供 URL 中的片段，但没有滚动。

我试过viewportScroller。这样做的主要问题是它第一次不起作用（例如：您被重定向到此静态页面并带有所需的片段，但滚动没有发生，如果您一直在同一页面上并重复该过程，如果您单击与您正在访问的网址相同的侧导航栏上的链接，它就可以工作： ([foo]/[bar]#[fragment])它也不起作用，因为没有更改导航。

用于路由器的额外选项：

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled',
  onSameUrlNavigation: 'reload'
};

ps.: useHash: true 没有改变什么。

ngOnInit 内的 viewportScroller：

this.viewportScroller.setOffset([0, 64]);
this.viewportScroller.setHistoryScrollRestoration('auto');

this.router.events.pipe(filter(element => element instanceof Scroll)).subscribe((element: any) => {
  console.log(element)
  this.viewportScroller.scrollToAnchor(element.anchor);
});

没有滚动到片段的最简单方法是什么！！！使用这个：

ngOnInit() {
  this.route.fragment.subscribe((fragment: string) => { 
    if (fragment && document.getElementById(fragment) != null) {
      document.getElementById(fragment).scrollIntoView({ behavior: "smooth" });
    }
  });
}

b/c 每次都有效，但不是 TS，因为我们在公司的项目中使用 TS。

请帮帮我

4

2 回答 2

20

我有同样的问题。查看Ben Nadel 的这个解决方案。该解决方案适用于 Angular 7.X。您可以配置 RouterModule 来处理锚点滚动，甚至可以在带有片段的锚点上多次单击。这是您需要的代码：

 @NgModule({
  imports: [RouterModule.forRoot(routes,
            {
              anchorScrolling: 'enabled',
              onSameUrlNavigation: 'reload',
              scrollPositionRestoration: 'enabled'
            })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

希望这可以帮助。

于 2019-04-04T20:49:35.330 回答
1

⚠️anchorScrolling: 'enabled当您使用*ngIf或类似的东西时不起作用，请参阅GitHub 问题 1和GitHub 问题 2。⚠️

解决此问题的现代单行方案：https ://stackoverflow.com/a/64185407/5356110

于 2020-10-03T14:42:52.277 回答