スクロールで可視範囲に入ったとき、ターゲットの要素ではなく、別の要素にclassを付与したい

Question

いつもお世話になっております。

1週間ほど悩みすぎて解決策が思いつかなったのでご質問させていただきました。

タイトルにもありますように、スクロールで可視範囲に入ったとき、
ターゲットのclassに対してaddするのではなく、ターゲット外の指定したclassにaddしたいのですが、
これはどういった感じの処理にすればいいのかご教示いただけませんでしょうか？

IntersectionObserverを使えばいいと調べたところ、下記のようになりましたが手詰まりとなっています。

  const options = {
    root: document.querySelector('.hoge'),
  }
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add('is-active');
      } else {
        entry.target.classList.remove('is-active');
      }, options);
    });
  });

お手数おかけいたしますが何卒宜しくお願いします。

Answer 1

適当に・・・

<style>
#prev{height:120%}
#next{height:120%}
.red{background-Color:red}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  let observer = new IntersectionObserver((changes)=>{
    for (const change of changes) {
      const rh=change.rootBounds.height;
      const cy=change.boundingClientRect.y;
      const ch=change.boundingClientRect.height;
      const flg= rh>cy && ch+cy>0;
      document.querySelector('#prev').classList.toggle('red',flg);
      document.querySelector('#next').classList.toggle('red',flg);
    }
  });
    var target = document.querySelector('#main');
    observer.observe(target);
});
</script>
<div id="prev">prev</div>
<div id="main">main</div>
<div id="next">next</div>

Comments

[eric_1225]

すいません！
ベストアンサーを押したタイミングでコメントいただいていたみたいで…ソースまで書いていただいたのに本当に申し訳ございません。
こちらも理想の動きになっており大変勉強になりました。
こちらのソースもひとつずつ読み解いて勉強させていただきます！

Answer 2

HTMLをご提示いただいていないので、具体的なコードは書けませんが、entry.targetを「指定したclass」の要素に変更すればいいかと思います。

Comments

[eric_1225]

ご回答ありがとうございました。
またhrml失礼いたしました。簡単ではありますが、下記のような形となっております。
class="hide"の要素を隠しておりまして、
さらに下にスクロールした際にclass="hoge"が可視範囲に入ったきたら
.hideにaddしたいと考えています。

<div class="hide">
</div>

//ここが可視範囲でhogeが見えた瞬間に上の要素.hideに別のclassを付与する
<div class="hoge">
<p>可視範囲</p>
</div>

[Lhankor_Mhy]

sample とは何のことなのかが読み取れませんでしたが、おそらく、document.querySelector('.hide') でいいと思います。

[eric_1225]

sample失礼しました。
修正いたしました。

説明が下手で申し訳ございません。

今回、.hideで発火させるのではなく、.hogeで発火させてhideにaddしたいと思っております。
ですので、document.querySelector('.hide')にしてしまうと.hideで発火してしまうと思うので、
なにか良い方法がないかとご質問させていただいた次第でございます。

[Lhankor_Mhy]

いえ、そうではなくて、回答にも書きましたが、entry.target を変更すればいいのではないかな、と思います。

[eric_1225]

すいません、勘違いしておりました。
entry.targetを変更で希望していた動きになりました。
この度は本当にありがとうございました。
また何かありましたらご教示いただけますと幸いです。