swiperの縦スクロール仕様で最後のスライド以降のコンテンツをスクロール表示させたい

某有名ファッションブランドサイトのようにswiper.jsを使用して縦横にスライドできるフルビジュアルのページの作成を使用としているのですが、最後のスライドから下にスクロールすることができません。
コールバックなどを使用しても上手く反応せず、困っています。

どなたか分かる方がいらっしゃいましたら御指南のほどお願いしたいです。

＜参考サイト＞
https://www.uniqlo.com/jp/ja/

＜HTML＞

<div id="panelWrapper">
	<div id="panelInner">
		<div id="panelScroll">
			<div id="visualPanels" class="Vswiper-container">
				<div class="swiper-wrapper">
					<section class="section01 swiper-slide">
						<div class="Hswiper-container">
							<ul class="swiper-wrapper">
								<li class="swiper-slide">
									<div class="block">
										<h3>TITLE01</h3>
									</div>
								</li>
								<li class="swiper-slide">
									<div class="block">
										<h3>TITLE02</h3>

									</div>
								</li>
								<li class="swiper-slide">
									<div class="block">
										<h3>TITLE03</h3>
									</div>
								</li>
							</ul>
							<div class="swiper-pagination"></div>
						</div>
					</section>	
					<section class="section01 swiper-slide">
						<div class="Hswiper-container">
							<ul class="swiper-wrapper">
								<li class="swiper-slide">
									<div class="block">
										<h3>TITLE01</h3>
									</div>
								</li>
								<li class="swiper-slide">
									<div class="block">
										<h3>TITLE02</h3>
									</div>
								</li>
								<li class="swiper-slide">
									<div class="block">
										<h3>TITLE03</h3>
									</div>
								</li>
							</ul>
							<div class="swiper-pagination"></div>
						</div>
					</section>
					<section class="section01 swiper-slide">
						<div class="Hswiper-container">
							<ul class="swiper-wrapper">
								<li class="swiper-slide">
									<div class="block">
										<h3>TITLE01</h3>
									</div>
								</li>
								<li class="swiper-slide">
									<div class="block">
										<h3>TITLE02</h3>
									</div>
								</li>
								<li class="swiper-slide">
									<div class="block">
										<h3>TITLE03</h3>
									</div>
								</li>
							</ul>
							<div class="swiper-pagination"></div>
						</div>
					</section>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</div>
	</div>
	
	<!--ここから下を見せたい--->
	<section style="height:100vh;background: #aaa;display: flex;justify-content: center;align-items: center;">
		<p>OK</p>
	</section>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.js"></script>

css

#panelWrapper{
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}
#panelInner{
	position: relative;
}
#panelScroll{
	margin: 0;
    width: 100%;
}
.Vswiper-container{
	width: 100%;
	height: 100%;
	height: calc(var(--vh, 1vh) * 100);
	overflow: hidden;
}
.Hswiper-container{
	width: 100%;
	height: 100%;
}
.swiper-slide{
	width: 100%;
	height: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide:nth-child(1) .swiper-slide:nth-child(1){background-color: red;}	
.swiper-slide:nth-child(1) .swiper-slide:nth-child(2){background-color: red;}	
.swiper-slide:nth-child(1) .swiper-slide:nth-child(3){background-color: red;}	
.swiper-slide:nth-child(2) .swiper-slide:nth-child(1){background-color: blue;}	
.swiper-slide:nth-child(2) .swiper-slide:nth-child(2){background-color: blue;}	
.swiper-slide:nth-child(2) .swiper-slide:nth-child(3){background-color: blue;}	
.swiper-slide:nth-child(3) .swiper-slide:nth-child(1){background-color: green;}	
.swiper-slide:nth-child(3) .swiper-slide:nth-child(2){background-color: green;}	
.swiper-slide:nth-child(3) .swiper-slide:nth-child(3){background-color: green;}

function setHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setHeight();
window.addEventListener("resize", setHeight);

/* 垂直スライダーの設定 */
const verticalSlider = new Swiper(".Vswiper-container", {
	direction: "vertical",
	slidesPerView: 1,
	speed: 500,
	mousewheel: {
		forceToAxis: true,
	},
	pagination: {
		el: ".swiper__pagination",
		type: "bullets",
		clickable: true,
	},
});

	
/* 水平スライダーの設定 */
const horizontalSlider = new Swiper(".Hswiper-container", {
  direction: "horizontal",
  slidesPerView: 1,
  speed: 500,
  mousewheel: {
    forceToAxis: true,
  },
  pagination: {
    el: ".swiper__pagination",
    type: "bullets",
    clickable: true,
  },
});

行動規範の内容に同意します

回答1件

自己解決

やや妥協的な処理ではありますが、自己解決しましたのでソース共有いたします。

【対応ポイント】
まずswiperのオプションに最後のスライドに到達するとスクロール処理を開放するというものが用意されていたため、タッチ・マウススクロールともにtoEdge/fromEdgeのコールバック関数で処理。
ただしこのままだと端のスライド到達時に妙な挙動が発生するため、setTimeoutで若干処理ずらすことでクリアしています。

また、別の問題として、swiperエリア上でスクロールするとそのエリアでのスクロールと判断され、swiperエリア直下以降のコンテンツがスクロールされないため、swiperエリアに重ねるように透過オーバレイを入れることでswiperエリア上でのスクロールを無理やりページ全体のスクロールとさせています。
更にスクロールトップが０時点でオーバレイが外れるように処理させることで、より自然なスクロール処理を可能とさせています。
オーバレイは、上記の例題でいうと#panelInnerに疑似要素で付与しています。

【JS】

//iOSなどのコントロールパネルの高さを取得
function setHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setHeight();
window.addEventListener("resize", setHeight);

/* 垂直スライダーの設定 */
const verticalSlider = new Swiper(".Vswiper-container", {
	loop:false,
	direction: "vertical",
	slidesPerView: 1,
	speed: 500,
	mousewheel: {
        forceToAxis: true,
    },
	pagination: {
		el: ".Vswiper-pagination",
		type: "bullets",
		clickable: true,
	},
	
	on:{
		toEdge:function(){
			setTimeout( function() {
				console.log('ok');
				verticalSlider.params.mousewheel.releaseOnEdges=true;
				verticalSlider.params.touchReleaseOnEdges=true;	
				}, 200 );
		},
		fromEdge:function(){	
			setTimeout( function() {
				verticalSlider.params.mousewheel.releaseOnEdges=false;
				verticalSlider.params.touchReleaseOnEdges=false;
			}, 200 );	
		}
	}
});


//スクロール有無次第でswiperエリアに透過オーバーレイを付与
$(function(){
	$(window).on('scroll load resize',function(){
		var scrollTop = $(this).scrollTop();
		console.log('scrollTop:'+scrollTop);
		if(scrollTop==0){
			$('#panelInner').removeClass('scrolloff');
		}else{
			$('#panelInner').addClass('scrolloff');
		}
	});
});	
	


	
/* 水平スライダーの設定 */
const horizontalSlider = new Swiper(".Hswiper-container", {
	loop:false,
	direction: "horizontal",
	slidesPerView: 1,
	speed: 500,
	mousewheel: {
		forceToAxis: true,
	},
	pagination: {
		el: ".swiper-pagination",
		type: "fraction",
		clickable: true,
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});

投稿2021/10/27 05:32

takachantomoya

総合スコア0