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

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

2024/09/19 JavaScript

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

1 サンプル
2 対応方法
- 2.1 ソースコード
3 その他

サンプル

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>