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

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

ただいまの
回答率

90.50%

  • JavaScript

    20439questions

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

  • jQuery

    8167questions

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

  • HTML5

    5136questions

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

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 150

uzurazura

score 4

html5・jquery3.3.1を使用しています。

やりたいこと

ひとつのページ内で、以下の3つのスクロールに関する条件をブロックごとに使い分けたいです。

①普通にスクロールできる部分
jQuery Scrollifyのようにブロックごとにピタッとスクロールしてくれる部分
この記事にあるようにスクロールを一時停止・再開する部分

問題:1

①と②の併用での問題点
Scrollify用クラス以外のクラスや要素(★)を入れると
・★部分がスクロールの際すっ飛ばされる
・最後が★の場合1つ手前のScrollifyが効かなくなる

<!--②Scrollify的な動きをさせたいブロック-->
<div class="box box1">
<img src="画像A.png" width=100%>
</div>

<!--②Scrollify的な動きをさせたいブロック-->
<div class="box box2">
<img src="画像B.png" width=100%>
</div>

<!--★①標準スクロールさせたいブロック-->
<img src="画像C.png" width=100%>

<!--②Scrollify的な動きをさせたいブロック-->
<div class="box box3">
<img src="画像D.png" width=100%>
</div>

<!--★①標準スクロールさせたいブロック-->
<img src="画像E.png" width=100%>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="testscript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1/jquery.scrollify.min.js"></script>
$(function() {
$.scrollify({section:".box"});
});

問題:2

③について、①②との併用以前の質問になります。
この記事のやり方でスクロールを一時的に停止・再開させたいですが、htmlに何を記述したら良いのか分かりません。
条件には[jQuery]inview.jsを使いたいです。
書いてみたコードはこれです↓

//可視範囲に入ったら
$(function() {
$('p').on('inview', function(event, isInView) {
    var p = $('p', this)[0];
    if (isInView) {

//スクロール禁止用関数
function no_scroll(){
//PC用
var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(scroll_event,function(e){e.preventDefault();});
//SP用
$(document).on('touchmove.noScroll', function(e) {e.preventDefault();});
}

//可視範囲を出たら
 } else {

//スクロール復活用関数
function return_scroll(){
//PC用
var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).off(scroll_event);
//SP用
$(document).off('.noScroll');
}

});


最終的には、下記のように①②③を混在させた形にしたいです

<!--②Scrollify的な動きをさせたいブロック-->
<div class="box box1">
<img src="画像A.png" width=100%>
</div>

<!--②Scrollify的な動きをさせたいブロック-->
<div class="box box2">
<img src="画像B.png" width=100%>
</div>

<!--①標準スクロールさせたいブロック-->
<img src="画像C.png" width=100%>

<!--③一時的にスクロール停止・再開させたいブロック-->
<p>テキスト</p>

<!--①標準スクロールさせたいブロック-->
<img src="画像E.png" width=100%>

<!--②Scrollify的な動きをさせたいブロック-->
<div class="box box3">
<img src="画像C.png" width=100%>
</div>
・
・
・
これらを繰り返す

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2019/04/11 11:37

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

    キャンセル

  • uzurazura

    2019/04/11 15:50

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

    キャンセル

  • mts10806

    2019/04/11 15:53

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

    キャンセル

  • uzurazura

    2019/04/12 16:29

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

    キャンセル

回答 1

+1

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

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

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


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/22 14:12

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

    キャンセル

  • 2019/04/27 16: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/
    力になれず申し訳ありません。

    キャンセル

  • 2019/04/27 16:27 編集

    もう少し調べたらこれでスクロールの禁止ができました。

    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つに置き換えてください。

    キャンセル

  • 2019/05/03 21:59

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

    キャンセル

  • 2019/05/05 21:11

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

    少しでもお役に立てたようで何よりです!

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20439questions

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

  • jQuery

    8167questions

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

  • HTML5

    5136questions

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