勉強したことのメモ

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

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

  JavaScript

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

 

サンプル

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

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

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

 

対応方法

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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

  関連記事

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

JavaScriptで特定の範囲内から数値が被らずにランダムに取り出す方法

1位から20位のランキング内でJavaScriptを用いてランダムに表示させたか ...

JavaScriptで後から追加した要素にイベントを割り当てる方法と挙動の違いについて

jQueryで後から追加した要素に対してイベントを割り当てる場合、いつもと異なる ...

jquery.cookie.jsで「$.cookie is not a function」エラー

フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...

Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法

Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...

S