過去 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 ではありません。
助けてください