12

過去 2 日間、角度付きでフラグメントをスクロールしてビューに表示することについて、インターネットを掘り下げてきました。

フラグメントとして機能する一連の ID を持つ静的 Web ページがあるとします。また、リンク付きのフラグメントをナビゲートするためのサイド ナビゲーション バーがあります。

Router anchorScroll を試してみましたが、これをモジュールに追加するだけでは何もしません。URL のフラグメントを提供するだけで、スクロールはしません。

私はviewportScrollerを試しました。これに関する主な問題は、初めて機能しないことです (例: 目的のフラグメントでこの静的ページにリダイレクトされますが、この同じページにいてプロセスを繰り返した場合、スクロールは行われません) 、アクセスしているのと同じURLを持つサイドナビゲーションバーのリンクをクリックすると機能します ([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