勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptにてページ内のスクロール可能な要素を最後までスクロールしないとボタンをクリックできないようにする方法

  JavaScript

お問い合わせページ等で「個人情報の取扱いについて」のような長い文章があり、その部分はスクロール可能な要素とする。こちらを最後まで読む(=スクロールする)までフォームの送信ボタンを押せないようにしたい。以前にメモしたJSのIntersectionObserverで対応できた。以下にサンプルとソースコードをメモ。

 

サンプル

https://taitan916.info/sample/IntersectionObserver/button/

ページ表示時はボタンが灰色且つCSSのcursorが「not-allowed」になっており、ボタンクリック時に「コンテンツを最後まで読んでください」と表示される。

コンテンツ部分を最後までスクロールするとボタンが青色且つCSSのcursorが「pointer」になり、ボタンクリック時に「OK」と表示される。

 

対応方法

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavaScriptにてページ内のスクロール可能な要素を最後までスクロールしないとボタンをクリックできないようにする方法サンプル</title>
</head>
<body>
    <style>
    .scroll{
        overflow-y: auto;
        height: 100px;
        border: 1px solid #ccc;
    }
    .button{
        background-color: #555555;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
    .off{
        cursor: not-allowed;
    }
    .on{
        background-color: #008CBA;
        cursor: pointer;
    }
    </style>

    <div class="scroll">
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p>コンテンツ</p>
        <p class="footer"></p>
    </div>

    <button class="button off">ボタン</button>

    <script>
    const footer = document.querySelector(`.footer`);
    const options = {
        root: null,
        rootMargin: `0px`,
        threshold: 1,
    };
    const observer = new IntersectionObserver(displayCheck, options);
    observer.observe(footer);

    function displayCheck(entries){
        entries.forEach(entry => {
            //コンテンツを最後までスクロールした場合
            if( entry.isIntersecting ){
                //.offを削除して.onを追加
                document.querySelector(`.button`).classList.remove(`off`);
                document.querySelector(`.button`).classList.add(`on`);
            }
        });
    }

    //ボタンクリック時
    document.querySelector(`.button`).addEventListener('click', function(){
        //コンテンツのスクロール状況により分岐処理
        if( document.querySelector(`.button`).classList.contains(`on`) ){
            alert(`OK`);
        }else{
            alert(`コンテンツを最後まで読んでください`);
        }
    });
    </script>
</body>
</html>

 

その他

コンテンツスクロール後にページリロードするとスクロール位置はそのままになるが、こちらをリセットしたい場合は先日メモした「モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法」を参照すること。

 - JavaScript

  関連記事

Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法

以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

jQueryにて指定した要素の親要素を削除する方法

jQueryにて指定した要素の親要素を削除したいケースがあった。通常の場合だと親 ...

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法

「input type="number"」のテキストボックスに対して「2桁まで」 ...