全画面表示の縦スライダーについて

Question

実現したいこと

全画面表示で縦スライダーをSwiperで表示しました。(フリックLP)

その下に２つセクションとフッターがあり、最後のスライドが終わったら下のセクションにスクロールするようにしたいです。

発生している問題・分からないこと

PCでは出来たのですがスマホ表示だと固定ヘッダーあたりでしかスクロールできず、スライドから抜け出せません。

これは実現可能なのでしょうか？

該当のソースコード

/* 1. アドレスバー・ツールバーを除いた100vhの高さを取得 */
function setHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setHeight();
window.addEventListener("resize", setHeight);
/* スライダー */
var swiper = new Swiper(".mySwiper", {
  direction: "vertical",
  slidesPerView: 1,
  mousewheel: true,
  autoHeight: true,
  spaceBetween: 0,
  nested: true,
  keyboard: {
    enabled: true,
  },
  effect: 'fade',
  fadeEffect: {
    crossFade: true,
  },
  mousewheel: {
    enabled: true,
    releaseOnEdges: true,
    touchReleaseOnEdges: true,
    forceToAxis: true,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  on: {
    slideChange: function() {
      // エッジ以外のときはmousewheelを有効
      swiper.params.mousewheel.releaseOnEdges = true;
    },
    reachEnd: function() {
      // 最後のスライドに到達したら解除
      setTimeout(function () {
        swiper.params.mousewheel.releaseOnEdges = false;
      }, 500);
    },
    reachBeginning: function() {
      // 最初のスライドに到達したら解除
      setTimeout(function () {
        swiper.params.mousewheel.releaseOnEdges = false;
      }, 500);
    }
  }

});

/* swiper */
section.slider-part {
  width: 100%; /* 横幅を画面いっぱいに広げる */
  height: 100vh; /* 縦幅を画面いっぱいに広げる */
  height: calc(var(--vh, 1vh) * 100); /* 縦幅を画面いっぱいに広げる（アドレスバー・ツールバーの高さを除く） */
}

section.slider-part .mySwiper {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
}

.swiper-slide {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  -ms-touch-action: auto;
  touch-action: auto;
}

.sec_fv, .sec_2, .sec_3, .sec_4, .sec_5, .sec_6, .sec_7 {
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
}

<section class="slider-part">
<div class="swiper-container mySwiper">
　<div class="swiper-wrapper">
　　<div class="swiper-slide slide1"><div class="sec_1"></div></div>
　　<div class="swiper-slide slide2"><div class="sec_2"></div></div>
　　<div class="swiper-slide slide3"><div class="sec_3"></div></div>
　　<div class="swiper-slide slide4"><div class="sec_4"></div></div>
　　<div class="swiper-slide slide5"><div class="sec_5"></div></div>
　</div>
</div>
</section>

<div class="sec_6"></div>
<div class="sec_7"></div>
<footer></footer>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

最後のスライドからブラウザスクロールに移動する設定自体は出来てます(PCでは実現、スマホでは一部実現)

全画面スライドで、最後のスライドから下にスクロールって出来るものなのでしょうか？

補足

フリックLPの依頼でこちら対応できませんでした。
実現自体可能なのか知りたいです。

Comments

[yambejp]

すでに試作したものがあるのであれば、確認できるサイトを提示いただくかソースを質問文に追記ください

＞全画面スライドで、最後のスライドから下にスクロールって出来るものなのでしょうか？

の意味もよくわかりません、可能であれば図示してもらえると回答しやすいかと

[Lhankor_Mhy]

CSSスクロールスナップでもデザインできそうですが、Swiper を使用している意図としてはページネーションが必須なのでしょうか？

[tn_coder]

ご質問ありがとうございます！
参考サイトとして提示されたHPでSwiperを使用していたのでそのまま使用しました。
ページネーションは必須ではありません。

[Lhankor_Mhy]

ああ、すみません、クロスフェードエフェクトをつけているのですね。ではCSSだと難しいですね。失礼しました。

[Lhankor_Mhy]

ドキュメントによると、mousewheel.releaseOnEdges は「trueにするとスライダーの端でマウスホイールイベントを開放してページのスクロールができるようにする」というものだと思います。
https://swiperjs.com/swiper-api#param-mousewheel-releaseOnEdges

これをスライダーの最後のイベントでfalseに変更している意図はどういうものでしょうか？

[tn_coder]

ご質問ありがとうございます！
そこら辺のコードは検索してコピペしたのですが、Swiper内の最後のコンテンツページでSwiper内のページスクロールからブラウザのスクロールに変更出来ないものかと試したものになります。

[Lhankor_Mhy]

であれば、mousewheel.releaseOnEdges は true ではないですか？
また、このオプションはマウスホイールをコントロールするものですから、マウスホイールを使用しない実際のモバイルデバイスでどの程度動作するのか、確認された方がいいのではないですか？

[tn_coder]

on: 以降を全てtrue/false逆になるということでしょうか？

[Lhankor_Mhy]

イベント設定の意図がわからないのでなんとも言えないですが、個人的には全部いらないもののように見えます。

[tn_coder]

確かに逆にしても削除しても変化なさそうなので、不要なものでした。
ありがとうございます！

[Lhankor_Mhy]

touchReleaseOnEdges は Mousewheel Control Parameters の中にはないようですね。
https://swiperjs.com/swiper-api#param-touchReleaseOnEdges

Answer 1

修正版：ヘッダとフッタをつけてみました。
ヘッダが流れて途中でスクロールして、最後のスクロールがおわったらフッタがあがってきます

<style>
body{
margin:0;
padding:0;
}
.wrap{
min-height:100%;
position: relative;
}
.head{
  background-Color:yellow;
position: sticky;
top:0;
}
.content{
  background-Color:lime;
height:200%;
}
.header,.footer{
height:100%;
}
</style>

<div class="header">header</div>
<div class="wrap">
<div class="head">aaa</div>
<div class="content">content a</div>
</div>
<div class="wrap">
<div class="head">bbb</div>
<div class="content">content b</div>
</div>
<div class="wrap">
<div class="head">ccc</div>
<div class="content">content c</div>
</div>
<div class="footer">footer</div>

Comments

[tn_coder]

ご回答ありがとうございます。
コードの追記をしたのですが、
➀全画面表示するコンテンツが数枚あり縦にスクロール表示（参考:https://www.uniqlo.com/jp/ja/ ）
②最後のコンテンツを表示後、スクロールして下にあるコンテンツとフッターを表示する
ということなのですが、わかりますでしょうか？
説明が下手で大変申し訳ないのですがお力添え頂けますと幸いです。

[yambejp]

わたしの認識がずれているような気もしますがいったん再確認お願いします

[tn_coder]

ありがとうございます。
フリックLPという単語を私は初めて聞いたのでデザイナーさんに伺ったところユニクロのHPを参考サイトとしてご共有頂いたので、おそらくはブラウザのスクロールで表示するものではないのかなと感じました。
yambejp様が作成して頂いたコンテンツの上にユニクロのHPのようなものが乗っかるイメージになるかと思います。
大まかなデザイン構成を書いてみましたのでご参考頂ければと思います。

[yambejp]

あ、失礼しました希望はフリックページですよね
縦100%のページをフリックすればよいということはフリックするセクション内はスクロールしないのでしょうか？

[tn_coder]

ご質問ありがとうございます！
はい！フリックするセクション内はスクロールの必要はないかと思います。