html5・jquery3.3.1を使用しています。
やりたいこと
ひとつのページ内で、以下の3つのスクロールに関する条件をブロックごとに使い分けたいです。
①普通にスクロールできる部分
②jQuery Scrollifyのようにブロックごとにピタッとスクロールしてくれる部分
③この記事にあるようにスクロールを一時停止・再開する部分
問題:1
①と②の併用での問題点
Scrollify用クラス以外のクラスや要素(★)を入れると
・★部分がスクロールの際すっ飛ばされる
・最後が★の場合1つ手前のScrollifyが効かなくなる
html
1<!--②Scrollify的な動きをさせたいブロック--> 2<div class="box box1"> 3<img src="画像A.png" width=100%> 4</div> 5 6<!--②Scrollify的な動きをさせたいブロック--> 7<div class="box box2"> 8<img src="画像B.png" width=100%> 9</div> 10 11<!--★①標準スクロールさせたいブロック--> 12<img src="画像C.png" width=100%> 13 14<!--②Scrollify的な動きをさせたいブロック--> 15<div class="box box3"> 16<img src="画像D.png" width=100%> 17</div> 18 19<!--★①標準スクロールさせたいブロック--> 20<img src="画像E.png" width=100%> 21 22 23 24<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 25<script src="testscript.js"></script> 26<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> 27<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1/jquery.scrollify.min.js"></script> 28
javascript
1$(function() { 2$.scrollify({section:".box"}); 3});
問題:2
③について、①②との併用以前の質問になります。
この記事のやり方でスクロールを一時的に停止・再開させたいですが、htmlに何を記述したら良いのか分かりません。
条件には[jQuery]inview.jsを使いたいです。
書いてみたコードはこれです↓
javascript
1//可視範囲に入ったら 2$(function() { 3$('p').on('inview', function(event, isInView) { 4 var p = $('p', this)[0]; 5 if (isInView) { 6 7//スクロール禁止用関数 8function no_scroll(){ 9//PC用 10var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; 11$(document).on(scroll_event,function(e){e.preventDefault();}); 12//SP用 13$(document).on('touchmove.noScroll', function(e) {e.preventDefault();}); 14} 15 16//可視範囲を出たら 17 } else { 18 19//スクロール復活用関数 20function return_scroll(){ 21//PC用 22var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; 23$(document).off(scroll_event); 24//SP用 25$(document).off('.noScroll'); 26} 27 28});
最終的には、下記のように①②③を混在させた形にしたいです
html
1<!--②Scrollify的な動きをさせたいブロック--> 2<div class="box box1"> 3<img src="画像A.png" width=100%> 4</div> 5 6<!--②Scrollify的な動きをさせたいブロック--> 7<div class="box box2"> 8<img src="画像B.png" width=100%> 9</div> 10 11<!--①標準スクロールさせたいブロック--> 12<img src="画像C.png" width=100%> 13 14<!--③一時的にスクロール停止・再開させたいブロック--> 15<p>テキスト</p> 16 17<!--①標準スクロールさせたいブロック--> 18<img src="画像E.png" width=100%> 19 20<!--②Scrollify的な動きをさせたいブロック--> 21<div class="box box3"> 22<img src="画像C.png" width=100%> 23</div> 24・ 25・ 26・ 27これらを繰り返す 28
どなたかこのような条件でページを制御する方法またがわかる方、ご教授願います。