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>
その他
コンテンツスクロール後にページリロードするとスクロール位置はそのままになるが、こちらをリセットしたい場合は先日メモした「モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法」を参照すること。
関連記事
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
JavaScriptでデバッグ時にconsole.log以外のメソッドを利用する方法
JavaScriptでデバッグ時は基本的にconsole.logを使って配列やオ ...
-
-
Chart.jsで描写したグラフを画像としてダウンロードさせる方法
サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...
-
-
3Dデータ(objファイル)をブラウザ上で表示する方法(JSC3D)
3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...
-
-
jQueryにてclosestの使いどころとparent / parentsとの違いについて
あるソースコードを見ているとjQueryにてclosest()という使ったことの ...