お世話になります。
はじめて質問させていただきます。
javascriptについては、WEB上のサンプルを使って組み合わせたり、検索でこちらにたどり着いて参考にさせていただいたりと、
自作まではできないレベルの者です。
実現したいこと
今更なのですが、、jqueryで動きを付けたページを作っておりまして、
タッチデバイスでのスクロールの動作を解決したくアドバイスをいただけたらと思います。
(プラグインは使っていません)
ソースコード(もしくはCode Pen)を確認いただくと、
contents3まではマウスホイール操作でコンテンツごとにスクロールするようになっています。
(わかりやすい例ですとScrollify.jsのような動作)
contents4、contents5、contents6では通常スクロールします。ページトップから下方向へ順に移動する場合は、PCでもタッチデバイスでも正常に動作しています。
発生している問題・エラーメッセージ
しかし、タッチデバイスで、ページトップ(contents1)から順に下方向へ移動していき、contents4、contents5、contents6のどれかに達してから上方向へスクロールしていき、
再度ページトップ(contents1)から下方向へスクロールしようとすると、contents2へ移動せず、contents5や、contents6へ移動してしまいます。
タッチスクロールが有効になる条件と無効になる条件(が問題だと思っています)が、
それをどのように組み合わせればよいかわかりかねております。
ここからの修正が大きなものになってしまうのであれば
自分にはそこまでの対応がもう難しいと思っております。
厚かましいかとは思いますが修正案をコードをご教示いただければ大変助かります。
該当のソースコード
Code Pen
https://codepen.io/mphzyvet-the-sans/pen/vYbGLbq
<style> .section{ height:100vh; } .contents1{ background:#ff8080; } .contents2{ background:#ff80c0; } .contents3{ background:#8080ff; } .contents4{ background:#c0c0c0; height:800px; } .contents5{ background:#70df00; height:700px; } .contents6{ background:#5badff; height:600px; } </style> <div class="section contents1"> コンテンツ1 </div> <div class="section contents2"> コンテンツ2 </div> <div class="section contents3"> コンテンツ3 </div> <div class="section contents4"> コンテンツ4(通常スクロール) </div> <div class="section contents5"> コンテンツ5(通常スクロール) </div> <div class="section contents6"> コンテンツ6(通常スクロール) </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function () { var sections = $(".section"); var isAnimating = false; var numSections = sections.length; var currentSection = 0; var scrollEnabled = true; var touchScrollEnabled = true; var startY = 0; var endY = 0; var scrollThreshold = 15; // スクロールとタッチスクロールのしきい値(px); function scrollToSection(sectionIndex) { if (sectionIndex < 0) sectionIndex = 0; if (sectionIndex >= numSections) sectionIndex = numSections - 1; isAnimating = true; $("html, body").animate( { scrollTop: sections.eq(sectionIndex).offset().top, }, 2000, function () { isAnimating = false; } ); currentSection = sectionIndex; } // ホイールスクロールのイベントハンドラを定義 function handleWheelScroll(e) { if (isAnimating || !scrollEnabled) return; e.preventDefault(); if (e.originalEvent.deltaY > scrollThreshold) { if (currentSection < numSections - 1) { scrollToSection(currentSection + 1); } } else if (e.originalEvent.deltaY < -scrollThreshold) { if (currentSection > 0) { scrollToSection(currentSection - 1); } } } // ホイールスクロールのイベントを最初に有効化 $(window).on("wheel", handleWheelScroll); // タッチデバイス用にタッチイベントを処理 var touchStartY = 0; $(document).on("touchstart", function (e) { touchStartY = e.originalEvent.touches[0].clientY; }); $(document).on("touchmove", function (e) { if (isAnimating || !touchScrollEnabled) return; var deltaY = e.originalEvent.touches[0].clientY - touchStartY; if (deltaY > scrollThreshold) { if (currentSection > 0) { scrollToSection(currentSection - 1); } } else if (deltaY < -scrollThreshold) { if (currentSection < numSections - 1) { scrollToSection(currentSection + 1); } } }); // スクロールがcontents3を超えたらホイールスクロールとタッチスクロールのイベントを無効化 $(window).on("scroll", function () { var windowScrollTop = $(window).scrollTop(); var contents3Top = sections.eq(2).offset().top; if (windowScrollTop > contents3Top) { scrollEnabled = false; touchScrollEnabled = false; } else { scrollEnabled = true; touchScrollEnabled = true; } }); scrollToSection(0); }); </script>
回答1件
あなたの回答
tips
プレビュー