スクロールにより、要素を表示させたときの処理

前提・実現したいこと

スクロール時に、複数ある特定クラス（クラス名 : slide__hidden）の親要素に新しい要素を追加し、
その後、その特定要素のクラスを削除するようにしたいと考えています。
該当ソースだと、スクロール時に現れる1つ目の親要素に追加され、
2つ目の要素のクラスが削除されてしまいます。ご教授願えないでしょうか。

該当のソースコード html

<section class="container__section01">
    <div class="inner">
        <h3 class="slide__txt">
            <span class="slide__hidden">hidden</span>
        </h3>
    </div>
</section>

<section class="container__section02">
    <div class="inner">
        <h3 class="slide__txt">
            <span class="slide__hidden">hidden</span>
        </h3>
    </div>
</section>

該当のソースコード Javascript

function slide__txt() {
    var sl__h = document.querySelectorAll('.slide__hidden');
    for (var i = 0; i < sl__h.length; i++) {
        var rect = sl__h[i].getBoundingClientRect(),
            sl__b = sl__h[i].parentNode,
            scroll__b = document.documentElement || document.body.parentNode || document.body;
        if(rect.bottom < scroll__b.clientHeight) {
            if(!trigger) {
                trigger = true,
                sl__b.innerHTML += '<div class="slide__move"></div>',
                setTimeout(function() {
                    sl__h[i].classList.remove('slide__hidden');
                }, 300)
            }
        }
    }
}
window.onscroll = function() {
    slide__txt();
}

kei344

2018/02/18 16:46

HTMLも質問文に追記してください。

退会済みユーザー

2018/02/18 18:07

追記させていただきました。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

変数triggerがグローバル変数になっているので1回trueになったらそれ以降の要素はすべてtrue
for (var i = 0; i < sl__h.length; i++)のiは関数slide__txtのスコープになるのでsetTimeoutに渡した関数内では常にi===sl__h.lengthになるはず
sl__b.innerHTML+=とすることで要素が書き換わり、sl__h[i]のクラスを書き換えても表示に反映されない

スコープの問題は for (let i = 0; i < sl__h.length; i++)とすれば解消するとおもいます。
要素を書き換えないようにするにはinsertAdjacentHTMLを使えば解決できるでしょう。
triggerについてはDATA属性でも使ってください。（下記コードには実装していません）

JavaScript
1function slide__txt() {
2    let sl__h = document.querySelectorAll('.slide__hidden');
3    for (let i = 0; i < sl__h.length; i++) {
4        let rect = sl__h[i].getBoundingClientRect(),
5            sl__n = sl__h[i],
6            sl__b = sl__h[i].parentNode,
7            scroll__b = document.documentElement || document.body.parentNode || document.body;
8        if(rect.bottom < scroll__b.clientHeight) {
9            //if(!trigger) {
10                //trigger = true,
11                //sl__b.innerHTML += '<div class="slide__move"></div>',
12                sl__b.insertAdjacentHTML( 'beforeend', '<div class="slide__move"></div>' );
13                setTimeout(function() {
14                    sl__n.classList.remove('slide__hidden');
15                }, 300)
16            //}
17        }
18    }
19}
20window.onscroll = slide__txt;
21```**動くサンプル：**[https://jsfiddle.net/h1s6ew2t/1/](https://jsfiddle.net/h1s6ew2t/1/)
22
23---
24
25【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 01日目） | Ginpen.com】
26[http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/](http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/)
27
28【いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ - WPJ】
29[https://www.webprofessional.jp/how-why-use-html5-custom-data-attributes/](https://www.webprofessional.jp/how-why-use-html5-custom-data-attributes/)