スクロールスナップ+Barba.jsで遷移前のページの元の位置に戻る方法

CSSでscroll-snap-typeを指定するとスクロール量が取得できなります。これが原因で、Braba.jsにおいて「あるページから別のページに非同期遷移した後、遷移前のページの元のスクロール位置に戻る」といったコードを書く際に工夫が必要になります。この記事ではこの要件を満たしたコードを紹介します。

実現したい内容

Barba.jsを使って非同期遷移することを想定します。今回実現したい内容は、以下の通りです。

上記の内容を画像を使って説明します。

1.ページAでスクロールをしてセクション1→セクション2へ

2.セクション2からページBへ非同期遷移する

3.ページBからページAのセクション2へ戻る

scroll-snap-typeを指定するとスクロール量が取得できなくなるため、工夫しないとこの要件を満たすことが出来ません。

完成形のデモ

私個人のポートフォリオページでこの機能を実現しております。

ポートフォリオ

https://kurokiryoh.com/

コードの解説

コードのポイントは2点です。

1つずつ解説していきます。

①戻るためのリンクにハッシュの指定する

まずはそれぞれのセクションにidを振って下さい。href属性でハッシュを指定すればそのセクションに飛べるようにします。

<!-- scroll-snap-typeを指定するコンテナ -->
<div class="snap-container">
  <!-- 各セクションにidを振る -->
  <section id="sec1"></section> 
  <section id="sec2"></section>
  <section id="sec3"></section>
</div>

遷移先のページから戻るリンクに、戻りたいセクションのハッシュまで指定します。

<a href="前のページのURL#セクションのid">戻る</a>

これだけで前のページのセクションに戻れそうですが、このままでは前のページの一番上まで戻されてしまいます。

②afterEnter()内で、指定したハッシュへジャンプ

ページの一番上まで戻されてしまうので、ハッシュを利用して元いたセクションにジャンプします。
afterEnter()内ではハッシュやURLの情報が取得できるので、これを利用します。

afterEnter(data) {
  const url = data.next.url.href //ハッシュ付きURL
  const hash = data.next.url.hash //ハッシュ
}

・location.hrefを使ってセクションへダイレクトに飛ぶ

location.href= urlで指定セクションにジャンプできます。

・ハッシュからエレメントを取得してscrollIntoView()を利用する

document.quertSelector(`#${hash}`).scrollIntoView()で指定セクションへジャンプできます。

scroll-snap-type指定時にスクロール量は取得できないため、scrollTo()は利用できません。

スクロール位置が取得できない理由

この記事で紹介してます。適宜参照してください。

スクロールスナップ時にスクロール量を取得する方法

https://xs363422.xsrv.jp/glLRkIDa6p/get-scrolly-when-using-scrollsnap/

公式ページで紹介されている方法について

公式のドキュメントにスクロール位置を保存するためのレシピが乗っています。

この方法は遷移前のスクロール位置を保持しておき、戻ってきた際にスクロール位置を利用するような処理になっています。繰り返しになりますが、scroll-snap-type指定時はスクロール位置が取得できないのでこの方法では実現できません。

スクロールスナップ時にスクロール量を取得する方法

https://xs363422.xsrv.jp/glLRkIDa6p/get-scrolly-when-using-scrollsnap/

まとめ

Barba.jsとscroll-snap-typeを組み合わせた際に「非同期遷移した後、遷移前のページの遷移前のスクロール位置に戻る」方法を紹介しました。他にも方法があるかもしれませんが、ざっと思いついた2つの方法の紹介に留めております。