勉強したことのメモ

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

  関連記事

JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法

だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメ ...

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

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

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

Internet ExplorerでJavaScript関数の初期値について

あるJavaScriptの関数でchromeやfirefoxは正常に動いたけどI ...

画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法

amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...