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>
その他
コンテンツスクロール後にページリロードするとスクロール位置はそのままになるが、こちらをリセットしたい場合は先日メモした「モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法」を参照すること。
関連記事
-
-
横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法
横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...
-
-
JavaScript / jQueryで〇番目、最初、最後の要素を指定する方法
jQueryでリストタグ(<li>)の〇番目、最初、最後の要素を指定 ...
-
-
Leafletで「Leaflet.markercluster」プラグインを導入してマーカークラスタ機能を追加する方法
LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...
-
-
JavaScriptの「pako」ライブラリでGzip圧縮したデータをPHPで展開する方法
先日、JavaScriptの「pako」ライブラリで文字列やオブジェクト(連想配 ...
-
-
JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...