height:100vh;の指定をするとスクロールで動くjsが反応しない。

Question

前提・実現したいこと

スクロールでセクションごとに要素を止めることと、フェードインパララックスを同時に使用したい

発生している問題

100vhのセクションごとに画面内に止まる動きをさせたく、

<div class="box">
<section class="hoge"><img src="hoge.jpg" class="sa"></section>
<section class="hoge"><img src="hoge.jpg" class="sa"></section>
<section class="hoge"><img src="hoge.jpg" class="sa"></section>
</div>

.box{
    overflow: auto;
    scroll-snap-type: y mandatory;
    height: 100vh;
}
.hoge{
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    position: relative;
    height: -webkit-fill-available;
}

上記のように記述しており、要素が画面内に入った際の動きとして下記jsを記述しているのですが、このjsが動きません。

var scrollAnimationElm = document.querySelectorAll('.sa');
var scrollAnimationFunc = function() {
  for(var i = 0; i < scrollAnimationElm.length; i++) {
    var triggerMargin = 0;
    var elm = scrollAnimationElm[i];
    var showPos = 0;
    if(elm.dataset.sa_margin != null) {
      triggerMargin = parseInt(elm.dataset.sa_margin);
    }
    if(elm.dataset.sa_trigger) {
      showPos = document.querySelector(elm.dataset.sa_trigger).getBoundingClientRect().top + triggerMargin;
    } else {
      showPos = elm.getBoundingClientRect().top + triggerMargin;
    }
    if (window.innerHeight > showPos) {
      var delay = (elm.dataset.sa_delay)? elm.dataset.sa_delay : 0;
      setTimeout(function(index) {
        scrollAnimationElm[index].classList.add('show');
      }.bind(null, i), delay);
    }
  }
}
window.addEventListener('load', scrollAnimationFunc);
window.addEventListener('scroll', scrollAnimationFunc);

試したこと

.box{
    overflow: auto;
    scroll-snap-type: y mandatory;
    /*height: 100vh;*/
}

このようにheight:100vhを取ると動いたのでここが原因かと思うのですが、そこを取ると今度は画面にピタッと収まらなくなってしまいます。

ご教示よろしくお願いいたします。

Comments

[gpsoft]

document.querySelectorAll('.sa')
↑これが空振りしますね。
HTMLが足りないのではないでしょうか?

[matcha-san]

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

記入漏れしておりました、すみません。。
修正いたしました通り、
<section>~</section>の中にsaのクラスを付与した画像が入っております。

よろしくお願いいたします。

Answer 1

説明の都合上、CSSに

body {
  margin: 0;
}

を追加させて頂きます。

要素が画面内に入った際の動きとして下記jsを記述しているのですが、このjsが動きません。

その原因は、windowオブジェクトに対してscrollイベントが発生してないからだと思います。

window.addEventListener('scroll', scrollAnimationFunc);

↑このイベントハンドラは、windowオブジェクトに対して仕込まれています。

しかし、.boxにheight: 100vhが指定されてるので、スクロールバーは.boxに付きます。よって、windowではなく、.boxのscrollイベントをlistenすべきでしょう。

あるいは、ハンドラの仕込みはそのままで、「試したこと」に書かれているように、.boxのheight: 100vhを削除しても良いと思います。「画面にピタッと収まらなくなる」の詳細が良く分かりませんが、たぶん、bodyにmargin: 0を付けると解消しませんか?

** 質問を受けて追記 **
windowではなく、.boxにイベントハンドラを仕込むコードは、
↓こんな感じです。

var box = document.querySelector('.box');
box.addEventListener('load', scrollAnimationFunc);
box.addEventListener('scroll', scrollAnimationFunc);

Comments

[matcha-san]

ありがとうございます！
「画面にピタッと収める」というのはスクロールスナップをしたく、その為にheightに100vhをつけております。

イベントハンドラをwindowではなく.boxのスクロールイベントをlistenとのことですが、私がjsについて知識が乏しいため、どのように書き換えれば良いのかの理解ができずこちらは試すことができておりません。。

bodyにmargin:0を付ける方法を試してみたのですが、解消しませんでした。

[gpsoft]

失礼しました、scroll-snapをスルーしてました。そうなると、やはり.box内で
スクロールさせる必要がありますね。イベントハンドラの仕込み方を追記しました。

[matcha-san]

追記いただいたコードを使用したところ無事に動きました。

ありがとうございます！