利用規約などをスクロールしたらアクティブになるボタンを実装する方法
カテゴリ：WEB制作
タグ：
※当サイトはアフィリエイト広告を利用しています。
利用規約などをスクロールしてから送信ボタンが押せるようなフォーム、あれを実装する方法を紹介します。
Javascript部分はたった9行で実装できます。
コードを紹介
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.scroll_box{
height: 300px;
width: 100%;
max-width: 500px;
margin: 0 auto;
overflow-y: scroll;
padding: 10px;
border: 1px solid #d2d2d2;
}
.btn input:disabled{
background: #9e9e9e;
}
.btn input{
display: block;
border: none;
padding: 10px 20px;
font-size: 16px;
background: #0869e6;
color: #FFF;
font-weight: bold;
letter-spacing: 0.2em;
margin: 30px auto 0;
}
</style>
</head>
<body>
<div class="scroll_box">スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。スクロールしてください。
</div>
<form>
<div class="btn">
<input type="submit" value="確認画面" class="btn" disabled >
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function () {
const scrollBox = document.querySelector('.scroll_box');
const submitBtn = document.querySelector('.btn input');
scrollBox.addEventListener('scroll', function () {
if (scrollBox.scrollTop + scrollBox.clientHeight >= scrollBox.scrollHeight) {
submitBtn.disabled = false;
}
});
});
</script>
</body>
</html>
コードを解説
HTML
スクロールボックスのスクロール量と高さを取得するためにクラス名(scroll_box)を振っておきます。
ボタンの方にも処理する際のターゲット用にクラス名(btn)を振っておきます。
<div class="scroll_box">スクロールしてください。以下略〜〜
</div>
<form>
<div class="btn">
<input type="submit" value="確認画面" disabled >
</div>
</form>
Javascript
読み込み後に実行
document.addEventListener('DOMContentLoaded', function () {
});
スクロールボックスとボタンを取得していきます。
const scrollBox = document.querySelector('.scroll_box');
const submitBtn = document.querySelector('.btn input');
スクロールで発火させます。
scrollBox.addEventListener('scroll', function () {
});
『○○○.scrollTop』でスクロール時の頂点部分を取得しスクロールボックス自体の高さプラスします。
スクロールボックス内部の高さを取得して、スクロール位置 + 高さが全体のスクロール高さと等しければ末尾まで到達したことになるため、『○○○.disabled = false;』でボタンをアクティブにします。
if (scrollBox.scrollTop + scrollBox.clientHeight >= scrollBox.scrollHeight) {
submitBtn.disabled = false;
}
実装完了です。
まとめ
Javascriptはたった9行で実装できますのでとても簡単なプログラムです。
ぜひ、参考にしてください。
