質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

335閲覧

html5/JS 同ページ内で3つのスクロールに関する条件をブロックごとに使い分けたい

uzurazura

総合スコア16

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/04/11 02:36

編集2022/01/12 10:55

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> 24252627これらを繰り返す 28

どなたかこのような条件でページを制御する方法またがわかる方、ご教授願います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/04/11 02:37

実際のコードをご提示ください。
uzurazura

2019/04/11 06:50

すみません、②・③それぞれに質問が及びそうなので、一旦こちらの質問を取り下げさせていただきます・・・・!
m.ts10806

2019/04/11 06:53

質問を編集して分ければ良いのではないでしょうか。
uzurazura

2019/04/12 07:29

ありがとうございます、編集いたしました!
guest

回答1

0

③だけはやったことがあります

昔遊んだ時のデモがありました。
画面に入った要素をアニメーションさせる

②に関してはわかりません。


補足ですが、発生したエラーなどを記載すると解決策を提示しやすいです。
1から全部説明するのはつらいです。

javascriptやjQueryのエラーの表示のさせ方はご存知ですか?

投稿2019/04/20 03:05

siruku6

総合スコア1382

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uzurazura

2019/04/22 05:12

ご回答ありがとうございます。 "要素が画面に入ったら〜"の部分は別のアニメーションテストでクリアしているのですが、 今回は"スクロールを一時停止・復活"についてになります。 またエラーは見れますが、そもそもhtmlに何を書けばいいか...の部分でつまづいております。
siruku6

2019/04/27 07:22 編集

スクロール禁止については経験がないのでわかりませんが、次の記事を参考に次のようなコードを書いてみた結果、スクロールイベントのキャッチはできたものの、スクロール自体の禁止はできませんでした。 ◇コード document.addEventListener("mousewheel", function(e) { console.log("mousewheel: 1"); e.preventDefault(); }); document.addEventListener("wheel", function(e) { console.log("wheel: 1"); e.preventDefault(); }); ◇記事 https://qiita.com/tksugimoto/items/07f02671286aabdddccb もう一つスクロールに関する記事を見つけましたが、スクロール自体の禁止を行うには至りませんでした。 https://blog.usx.jp/javascript/prevent-scroll/ 力になれず申し訳ありません。
siruku6

2019/04/27 07:31 編集

もう少し調べたらこれでスクロールの禁止ができました。 function handleTouchMove(event) {  event.preventDefault(); } document.addEventListener('wheel', handleTouchMove, { passive: false }); 次の記事を参考にして下さい。 https://qiita.com/yukiTTT/items/773356c2483b96c9d4e0 ちなみにひとブロックで表現するならこうなります。 document.addEventListener('wheel', function (event) {  event.preventDefault(); }, { passive: false }); ※可読性を上げるために全角スペースを挿入しているので、コピー&ペーストする場合は半角スペース2つに置き換えてください。
uzurazura

2019/05/03 12:59

ご回答へのお返事が遅くなってしまい申し訳ございません。 いろいろと調べていただき、感謝いたします。 貼っていただいた記事とコードが使えそうです。 こちらを参考に、もう少しJavasqriptを勉強して知識を深めてみようと思います・・・! ありがとうございます。
siruku6

2019/05/05 12:11

なかなか特殊なことに挑戦しようとしているようですので、より基礎の力が問われると思います。 でもその分、できたときはかなり力がついていると思いますので、頑張ってみてください。 少しでもお役に立てたようで何よりです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問