スクロール(scroll)をある一定量ごとにスクロールさせたいです。

Question

以下コードペンからコピペ

<div class=a></div>
<div class=b></div>
<div class=c></div>

*{
  padding: 0;
  margin: 0;
}
.a,.b,.c{
  width: 100vw;
  height:　100vh;
}

.a{
  background-color: #f00;
}
.b{
  background-color: #0f0;
}
.c{
  background-color: #00f;
}

var html = $("html").offset().top;
var a = $(".a").offset().top;
var b = $(".b").offset().top;
var $window = $(window);
//一度のスクロールごとに100vh動かしたい
if (html==a) {
      $window.scroll(function(){
  $("html,body").animate({scrollTop:b}, "swing");
        // 上や下にスクロールできない
      });
    };

コンテンツごとに一度のスクロール動作で100vhずつ動かしたく
一旦100vhは動いたのですが、その後"b"から動かなくなりました
何が原因でしょうか？

Answer 1

こんにちは。

何が原因でしょうか？

ここが原因です。

      $window.scroll(function(){
  $("html,body").animate({scrollTop:b}, "swing");
        // 上や下にスクロールできない
      });

$window.scroll()はスクロールイベントのリスナを設定するものです。スクロールがされるたびに、中に書かれている関数を実行します。
その関数内の$("html,body").animate({scrollTop:b}, "swing");は、bの位置までアニメーションでスクロールする、というコードです。

つまり、まとめると、スクロールがされるたびにbの位置まで戻されるので、bから動かなくなります。

Comments

[ShojiroAbe]

御指摘ありがとうございます。

一応自分なりに
if(html==a)という条件下でしか動かないようにしたつもりでしたが
Mhyさんのとおり、一向に動きません
立て続けに申し訳ありませんが、定義の仕方がいけなかったのでしょうか？
この点について何か解消法はありますでしょうか？

[Lhankor_Mhy]

$window.scroll()はスクロールイベントのリスナを設定するものです。
ですので、設定された後は、スクロールがされるたびに、中に書かれている関数を実行します。

ここでのif文は$window.scroll()の外側にあるので、この設定をするか否か、という働きをしています。
一度設定されてしまえば、その後はif文を通らずに、スクロールがされるたびに、中に書かれている関数を実行します。

そうではなくて、アニメーション処理をするか否か、という働きをさせたいのであれば、$("html,body").animate()の外側に書いた方がいいでしょう。