全画面の縦swiperが終了したらフッターにスクロールしたい

Question

前提・実現したいこと

ページネーションを付けた縦のswiperを全画面で表示し、
スライドが全て終わったらフッターにスクロールさせたいです。

発生している問題

swiperを全画面で表示すると、その中でのスクロールしか効かず、フッターに行けません。
スライド内に閉じ込められる感じになります。

該当のソースコード

見づらいですが、CodePenで再現しました。
https://codepen.io/baba88/pen/PoKyryL
スライドの下部にフッターは存在するのですが、swiper内でスクロールが止まってしまうため見られません。
前面に固定しているheaderにカーソルを移動すれば、footerにスクロールできます。

試したこと

swiperのオプションにfreeMode: true,を追加するとフッターに行けるようになるのですが、
そうするとswiper1枚ずつの区切り(で伝わりますでしょうか?)がなくなってしまいます。

補足情報

swiperは7.0.9です。

スクロールした時の区切りを残しつつフッターにスクロールできるようにする方法が皆目見当もつかず、
jsでなにかしらの制御をしたほうが良いのか、swiperを使いこなせてないのか、
なにか良い方法があればご教授いただけますと幸いです。

また、そんなのは不可能だということであれば諦めてfreeMode: true,にしようと思いますので、
その際もお手数ですがご指摘いただけますとありがたいです。

Comments

[Lhankor_Mhy]

CSS のスクロールスナップについてはすでにご検討されていますか？

Answer 1

https://teratail.com/questions/369406?modal=r-comp&reply=true#reply-501251にてご回答いただいた通り、

mousewheel: {releaseOnEdges:true},

で一旦は解決したのですが、最後のスライドが無視されてしまいあまり具合が良くなく、
公式ドキュメントを読んでいたらfreemodeでもスナップが効くオプションを発見しました。
https://swiperjs.com/swiper-api#free-mode-parameters

freeMode: {
  enabled: true,
  sticky: true,
},

Lhankor_Mhyさん、ありがとうございました。

Answer 2

そのようなオプションがあるようです。

 mousewheel: {releaseOnEdges:true},

Set to true and swiper will release mousewheel event and allow page scrolling when swiper is on edge positions (in the beginning or in the end)

Mousewheel Control Parameters | Swiper API

---

なお、補足依頼にも書きましたが、ご質問の範囲の要件ですと、CSS スクロールスナップでいいようにも思えます。

Comments

[bonten.design]

ありがとうございます！
オプションでいい感じにできました。
調べ不足ですね。。公式ドキュメントちゃんと読むようにします。あと英語の勉強をします。

補足依頼のほうもありがとうございます。
CSSのスクロールスナップ知らなかったので、調べつつ使っていきます。

[Lhankor_Mhy]

お役に立てたようで何よりです