javascript js_scroll-add-class

スクロール時に対象要素にクラス付与

2025.01.08 2025.02.14

スクロール時に対象要素が画面の特定の位置にきたときにクラス付与させる方法を紹介します。

今回紹介する方法では、scrollイベント時に毎回処理が行われる為、状況によっては動作が重くなる場合があります。

別の方法としてIntersectionObserverクラスを使用して実装する方法がありますが、また別の記事として紹介したいと思います。

デモ

See the Pen スクロールで対象要素にクラス付与 by yoshi (@mikanbako) on CodePen.

コード

<div class="wrapper">
  <h2>下へスクロールしてください<br>それぞれの要素が画面の高さ60%の位置まできたら表示されます。</h2>
  <div class="box fadeIn">fadeIn</div>
  <div class="box fadeInTop">fadeInTop</div>
  <div class="box fadeInBottom">fadeInBottom</div>
  <div class="box fadeInRight">fadeInRight</div>
  <div class="box fadeInLeft">fadeInLeft</div>
</div>
.fadeIn {
  opacity: 0;
}

.fadeInTop {
  opacity: 0;
  transform: translateY(-40px);
}

.fadeInBottom {
  opacity: 0;
  transform: translateY(40px);
}

.fadeInRight {
  opacity: 0;
  transform: translateX(40px);
}

.fadeInLeft {
  opacity: 0;
  transform: translateX(-40px);
}

.fadeIn.js-actived,
.fadeInTop.js-actived,
.fadeInBottom.js-actived,
.fadeInRight.js-actived,
.fadeInLeft.js-actived {
  opacity: 1;
  transform: translate(0);
}
const targetElements = document.querySelectorAll(".fadeIn, .fadeInTop, .fadeInBottom, .fadeInRight, .fadeInLeft");
const adjustmentValue = 0.6;

function addClassToTarget(){
  const windowHeight = window.innerHeight;
  
  targetElements.forEach(target => {
    const targetPosition = target.getBoundingClientRect().top;
    if(targetPosition < windowHeight * adjustmentValue){
      target.classList.add("js-actived");
    }
  });
}

window.addEventListener("scroll", addClassToTarget);

1行目 querySelectorAll(“***, ***, ***, …”)

クラス付与させたい対象要素を全て取得しておきます。

2行目 クラス付与タイミング調整用数値

対象要素が画面高さの何％の位置にきたときにクラス付与するかをこの数値で設定します。

上記の例では、9行目のif文にて画面高さに0.6を掛けることで対象要素が画面高さ60％の位置に来た時にクラス付与されるようになります。

8行目 対象要素の位置取得

getBoundingClientRect()を使用し、画面からの要素の位置を取得します。getBoundingClientRect().topで高さ（Y座標）を取得できます。

getBoundingClientRect()要素の寸法と、そのビューポートに対する相対位置に関する情報をDOMRectオブジェクトで返します.

9,10行目 要素が画面内に入ってきたらクラス付与

今回の実装では、一度クラス付与するとそのままとなります。画面外へでたらクラスを削除するといった処理も実装可能です。

15行目 scrollイベント時に動作するようにする

window.addEventListener("scroll", 作成した関数);でスクロール時に処理が行われるようにします。

関連記事