Q&A
参考サイトのコードをざっくり見た感じ、スクロールイベントを拾って transform で動かしているみたいですね。
実現したいこと
メインビジュアルから次のセクションまでの間のみ、スクロール量に関わらず、1スクロールで移動させたいです。参考サイトのように、メインビジュアル部分でスクロールイベントが起こった際、連続したスクロールをしても1スクロールで次のセクションまでスクロールされるようにしたいです。
また、参考サイトではメインビジュアルから次のセクションへスクロールすると、表示上は次のセクションにスクロールされているのですが、スクロールバーは動かないという現象がおこっていますが、この仕組みもよくわからないので、併せてお聞きしたいです。
参考サイト:https://www.yadohouse.jp/
発生している問題・分からないこと
メインビジュアルからスクロールを行うと、クラスを付与しスムーズスクロールされるようにはできたのですが、スクロールを連続して行うと、カクついてしまいます。
また、メインビジュアルから次のセクションにスクロールすると、通常のスクロールと同じ挙動をしてしまいます。
こちらにソースコードを記述しますが、CodePenのURLも念のため記述します。
CodePen:https://codepen.io/k_2024/pen/NPWXLbj
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<title></title> 5 6<!-- Javascript --> 7<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script> 8</head> 9 10<body id="page"> 11 12<div class="pageWrap"> 13 <div class="mv"> 14 <div class="inner"> 15 <figure> 16 <img src="https://placehold.jp/1920x700.png"> 17 </figure> 18 </div> 19 </div> 20 <div class="wrapper"> 21 <div class="page-content"> 22 <div class="section"> 23 直下コンテンツの内容がここに入ります。 24 </div> 25 </div> 26 </div> 27</div> 28 29</body> 30</html> 31
scss
1.mv{ 2 position: relative; 3 4 .inner{ 5 display: flex; 6 flex-wrap: nowrap; 7 8 figure{ 9 height: 100vh; 10 11 img{ 12 width: 100%; 13 object-fit: contain; 14 } 15 } 16 } 17} 18 19.wrapper{ 20 height: 200vh; 21 background: #ccc; 22} 23
jQuery
1$(function () { 2 var $mainVisual = $('.mv'); 3 var $section = $('.section'); 4 var $wrapper = $('.wrapper'); 5 var isAnimating = false; 6 var touchStartY = 0; 7 var touchMoveY = 0; 8 9 /* スムーズスクロール */ 10 function smoothScroll($target) { 11 if (isAnimating) return; 12 isAnimating = true; 13 14 $('html, body').stop().animate( 15 { 16 scrollTop: $target.offset().top, 17 }, 18 800, 19 function () { 20 isAnimating = false; 21 } 22 ); 23 } 24 25 $(window).on('wheel', function (event) { 26 if (isAnimating) return; 27 28 var deltaY = event.originalEvent.deltaY; 29 var scrollTop = $(window).scrollTop(); 30 var mainVisualBottom = $mainVisual.offset().top + $mainVisual.outerHeight(true); 31 var conceptTop = $section.offset().top; 32 var conceptBottom = conceptTop + $section.outerHeight(true); 33 var windowHeight = $(window).height(); 34 35 if (scrollTop < mainVisualBottom && deltaY > 15) { 36 smoothScroll($wrapper); 37 } else if (deltaY < -80) { 38 if (scrollTop < conceptTop || scrollTop > conceptBottom) { 39 return; 40 } 41 if (scrollTop + windowHeight <= conceptBottom) { 42 return; 43 } 44 if (scrollTop <= conceptTop + windowHeight * 0.1) { 45 smoothScroll($mainVisual); 46 } 47 } 48 }); 49 50 $(window).on('touchstart', function (event) { 51 touchStartY = event.originalEvent.touches[0].pageY; 52 }); 53 54 $(window).on('touchmove', function (event) { 55 touchMoveY = event.originalEvent.touches[0].pageY - touchStartY; 56 }); 57 58 $(window).on('touchend', function () { 59 var scrollTop = $(window).scrollTop(); 60 var mainVisualBottom = $mainVisual.offset().top + $mainVisual.outerHeight(true); 61 var conceptTop = $section.offset().top; 62 var conceptBottom = conceptTop + $section.outerHeight(true); 63 var windowHeight = $(window).height(); 64 65 if (scrollTop < mainVisualBottom && touchMoveY < -45) { 66 smoothScroll($wrapper); 67 } else if (scrollTop < conceptTop || scrollTop > conceptBottom) { 68 return; 69 } 70 if (scrollTop + windowHeight <= conceptBottom) { 71 return; 72 } 73 if (scrollTop <= conceptTop + windowHeight * 0.1) { 74 smoothScroll($mainVisual); 75 } 76 }); 77}); 78
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
条件を厳格にしているのですが、通常のスムーズスクロールになってしまいました。
補足
特になし
回答2件
0
ちょっと仕様が違うかもしれませんが以下のような感じでどうでしょうか？
html
1<script> 2window.addEventListener("wheel", e=>{ 3 const behavior="smooth"; 4 const isUp=event.deltaY>10; 5 const tops=[...document.querySelectorAll('.section')].map(x=>x.getBoundingClientRect().top); 6 const top=(isUp?Math.min:Math.max)(...tops.filter(x=>isUp?(x>0):(x<=0)))+window.scrollY; 7 window.scrollTo({top,behavior}); 8}); 9</script> 10<style> 11*{ 12margin:0; 13} 14.section{ 15height:100%; 16background-Color:gray; 17} 18.section:nth-child(odd){ 19background-Color:lightgray; 20} 21</style> 22<div class="section">1</div> 23<div class="section">2</div> 24<div class="section">3</div> 25<div class="section">4</div> 26<div class="section">5</div>
投稿2025/03/18 01:05
総合スコア117400
ご回答ありがとうございます。
そうです！やりたいことはかなり近いです！
この処理をsection1とsection2の間でのみ適用させ、スマホでも同じ挙動になるようにしたいです。
※申し訳ございません、jQueryの記述でいただくことは可能でしょうか。
0
ご希望の動作と違うかもしれませんが、CSSスクロールスナップで似たようなことができるかと思います。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <title></title> 6 <style> 7 :root { 8 scroll-snap-type: y mandatory; 9 } 10 11 .mv { 12 scroll-snap-align: start; 13 position: relative; 14 15 .inner { 16 display: flex; 17 flex-wrap: nowrap; 18 19 figure { 20 height: 100vh; 21 22 img { 23 width: 100%; 24 object-fit: contain; 25 } 26 } 27 } 28 } 29 30 .wrapper { 31 height: 200vh; 32 background: #ccc; 33 scroll-snap-align: start; 34 scroll-snap-stop: always; 35 } 36 </style> 37</head> 38 39<body id="page"> 40 41 <div class="pageWrap"> 42 <div class="mv"> 43 <div class="inner"> 44 <figure> 45 <img src="https://placehold.jp/1920x700.png"> 46 </figure> 47 </div> 48 </div> 49 <div class="wrapper"> 50 <div class="page-content"> 51 <div class="section"> 52 直下コンテンツの内容がここに入ります。 53 </div> 54 </div> 55 </div> 56 </div> 57</body> 58 59</html>
投稿2025/03/22 02:24
編集2025/03/22 07:54総合スコア37338
ご回答ありがとうございます。
根本的な動きはこういうことなのですが、参考サイトのようにマウスホイールを連続で動かしてもずれないようにできればいいんですが、、、
`scroll-snap-stop: always;`とするとスクロールスナップを通り過ぎることを禁止できるのですが、これで想定されている動作に近くなりますか？
そうですね
rootに対して`scroll-snap-stop: always;`を指定しても通り過ぎてしまいました。
> rootに対して`scroll-snap-stop: always;`を指定
そうではないですよ。回答を編集していますから、参考になさってください。
参考にされているサイト通りに作りたい、ということであれば、補足依頼欄に書いた通り、transform で動かしてます。補足依頼欄にはスクロールイベントと書きましたが、よくみるとホイールイベントとtouchmoveを拾ってました。メインビジュアルが動くまでは、イベントをpreventDefault()してスクロールが起きないようにしているみたいでした。その方針で取り組まれてはいかがでしょうか。
お察しの通り、参考にされたサイトはそのような作りになっていますから、スクロールバーやページダウンキーなどではスクロールが起きてしまいますから、上手くアニメーションが起きないという欠点があります。
あなたの回答
tips
プレビュー
