他のページに移動するときに ScrollPosition が先頭に設定されない

Question

Web ページはマスター/スレーブ アプローチを使用して設計されています。マスターにはタブ (左ペイン) があり、クリックするとスレーブ (右ペイン) の対応するページが表示されます。例えば。 master には「スキーマとテンプレート」という 2 つのタブが 3 つあり、デフォルトでスキーマが表示されます。ユーザーは、左側のペイン (マスター ページによってロードされる) のタブを使用して、これら 2 つのページ (スレーブ ページによってロードされる) 間を移動できます。

ユーザーがスキーマ ページ内の任意の位置までスクロールしてテンプレート ページに移動すると、スクロール位置は先頭に設定されません。ただし、スクロール動作はルーターファイルで設定されます。

const createRouter = () =>
  new VueRouter({
     スクロール動作: () => ({ x: 0, y: 0 })、
     ルート:[
     //すべてのルートを持っています
     】
});

scrollBehavior の近くにブレークポイントを設定して観察すると、ナビゲーションがあるたびに行がヒットしますが、アーキテクチャからテンプレート ページに移動するときにスクロール位置が先頭に設定されません。

ただし、テンプレート ページ内の特定の場所までスクロールしてアーキテクチャ ページに移動すると、そのページが先頭に設定されます。

templates.ts の Mounted() 内に window.scrollTo(0, 0); 関数を書いてみました。クリックしてもトップには表示されません。

なぜこれが起こっているのか説明できる人はいますか? stackoverflow にリストされているほぼすべての可能な解決策を試しました。

Answer 1

私も vue でこの問題に遭遇しました。一番上までスクロールしたい場合は、このトリックを使用する必要があります。 window.scrollTo(0, 0); の代わりに setTimeout で使用すると、タイムアウトが非常に小さくなります。
settimeout(()=>{ window.scrollTo(0, 0); }, 10)
お役に立てれば。