zustandライブラリを使ったページごとのスクロール位置を復元する実装について
こんにちわ。nap5です。
zustandライブラリを使ったページごとのスクロール位置を復元する実装について紹介したいと思います。
zustandライブラリについてはこちらです。
感触的にはrecoilライブラリと似ているイメージを持ちました。
zustandライブラリを使ったアウトプットしてみたかったので、スクロール位置を復元する実装にチャレンジしてみました。
デモではハンバーガーメニューのアクション時のみ対応しています。
パンくずとロゴクリック時には対応していません。
いざ対応するとなると、煩雑になりそうな感触があったので、ハンバーガーメニューの部分だけにとどめました。
この辺に対応するかどうかはユースケース次第ですね。いざ自前で実装するとなると大変になりそうです。ライブラリが込み入ってくるとその挙動調節の大変さは倍増しそうです。スクロール位置の復元処理は全部捨てるないしは一部対応のみがいいのかもしれません。考えることが多い印象です。また、縦にコンテンツが長くないものは対応する必要はほぼないと思います。
Next.jsではデフォルトで対応できるオプションが提供されている見たいですかね。便利そうです。
以下のデモですが、不安定のため、zipにしたものも添付します。zipファイルダウンロード後、展開します。展開後のディレクトリに移動した後、以下のコマンド打つとデモが動きます。
$ cd 展開後のディレクトリ
$ yarn install
$ yarn dev以下のcodesandboxのデモが見れない場合のフォールバックとしてrenderというホスティングサービスでデプロイしたものも用意しました。
デモサイトです。
デモコードです。
このデモを通して、スクロール位置の復元処理は自前でやると煩雑になりそうなんだなという感触が得られました。
最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。
また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
https://www.udemy.com/course/count-down-up-using-javascript-animation-api/
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？