詳細遷移時に scrollTo(0, 0) と blur() を入れた理由

はじめに

DVDレンタル顧客向けアプリで映画一覧から詳細画面に遷移したとき、以下の問題が発生していました。

• スクロール位置が一覧の位置のまま残ってしまう
• 選択したボタンにフォーカスが残留して見た目が悪い

解決策

遷移時のイベントハンドラに以下を追加しました。

window.scrollTo(0, 0)
;(event.target as HTMLElement).blur()

scrollTo(0, 0) を入れた理由

Vue Router を使わない currentPage 管理では、SPA の自動スクロールリセットが効かないため明示的に呼ぶ必要がある。

blur() を入れた理由

ボタンにフォーカスが残ったまま画面が切り替わると、アウトラインリングが残留してユーザーに違和感を与えるため。

学んだこと

SPA でルーターを使わない場合、本来フレームワークが自動処理してくれる UX 細部を手動で補う必要があります。