勉強したことのメモ

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

  関連記事

jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...

Leafletでマーカーを動的に変更し、変更状況をCookieに保存する方法

Leafletでポップアップ(フキダシ)内のボタンをクリックするとマーカーを動的 ...

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...

JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法

JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...

ローソク足のグラフをJavaScriptで描写する方法(highstock)

株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...