JavaScript

JavaScriptでスクロール終了時にチェックボックスをアクティブにする方法

  /

Hello World🌍

お問い合わせフォーム内やソフトウェアのインストール過程で、利用規約を全部読んだら（スクロールしたら）「同意」のチェックボックスが押せるようになる機能を見たことはありませんか？

今回は、このようにスクロール終了時にチェックボックスをアクティブにする方法を紹介します。

Contents
  1. サンプル
  2. 解説
  3. おわりに

サンプル

初期表示では「同意する」のチェックボックスはグレーアウトしており、この状態ではまだ押せません。

スクロールボックスを最後までスクロールしてみてください。
チェックボックスが押せるようになります。

See the Pen scroll end active by POSIPAN (@posipan) on CodePen.

解説

HTMLとCSSの説明は長くなる上、特殊なことはしていないので割愛させていただきます。

JavaScript

// スクロールボックスとチェックボックスの要素を取得
const scrollElm = document.getElementById('scroll_elm');
const check = document.getElementById('check');

// スクロールボックスに対してスクロールイベントを付与
scrollElm.addEventListener('scroll', function() {
  // if文の条件式は要素がスクロールの終点に到達するとTrueになる
  if (scrollElm.scrollHeight - scrollElm.scrollTop <= scrollElm.clientHeight) {
    check.disabled = false; // チェックボックスをアクティブにする
  }
});

ポイントとなるメソッドを3つ解説していきます。

Element.scrollHeight

画面上に表示されない部分も含めた、要素の高さをpx値で取得できます。
ページの最上端からある要素のpaddingを含む、下端までの距離です。

今回の場合、サンプルのスクロールボックスをスクロールし切ったときの値がこれに当たります。

Element.scrollTop

要素の一番上からのスクロール量をピクセル単位で取得できます。
スクロールイベントのコールバック関数内で使うとスクロールする度に値が変化していくので、scrollHeight値からscrollTop値を引くと、スクロールする度に結果が0に近づいていきます。

Element.clientHeight

paddingを含む、要素の内側の寸法を取得できます。
以下のキャプチャはサンプルで取得しているclientHeightの部分です。
borderやmarginは含まれていません。

スクロールする度に要素のclientHeight値に近づいていきます。
スクロール位置が等価ないし超えたタイミングでチェックボックスはアクティブになります。

element.scrollHeight - element.scrollTop <= element.clientHeight

おわりに

高さを取得する系のメソッドが満載でしたね！

この辺りはいつも何がどれだったか忘れてしますので、近いうちにメソッドをまとめていきたいと思います。

ではまた✋

関連記事