【jQuery】規約を一番下までスクロールするとボタンが押せる

デザオ
規約を一番下までスクロールするとボタンが押せるようにしたいのですができますかー？
デザコト
ふむふむなるほど、よく見かけますねー、活性化ですねー、できますよー。

規約を一番下までスクロールするとボタンが押せる、実装

一番下までスクロールすると、ボタンに付いてるdisabledが外れるように設定します。

コードを見る（HTML・CSS・jQuery）

HTML

<section>
  <div class="scroll_box">
    <p>一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。</p>
  </div>
  <form>
    <div class="btnArea">
      <input type="submit" value="" class="check-btn" disabled>
      <a href="https://125naroom.com/web/4208" target="_blank" class="btn_one">ボタン</a>
    </div>
  </form>
</section>

CSS

/*-------------
.scroll_box
-------------*/

.scroll_box {
  height: 150px;
  overflow: auto;
  background-color: #f3efe6;
  border: 4px solid #2b2a27;
  padding: 30px;
  margin: 0 0 20px;
}
.scroll_box p {
  margin: 0;
}

/*-------------
btn
-------------*/

.btnArea {
  max-width: 400px;
  margin: 20px auto 0;
  position: relative;
}
/* disabled のあいだは、透明の input をボタンの上にかぶせる */
input.check-btn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0);
  padding: 0;
  cursor: default;
  z-index: 1;
  outline: none;
  transition: .3s;
  box-sizing: border-box;
  appearance: none;
}
input.check-btn:not(:disabled) {
  z-index: -1;
}
a.btn_one {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e8e3d8;
  border: 2px solid #e8e3d8;
  border-radius: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  padding: 0 10%;
  color: #6b675f;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  position: relative;
  transition: .2s;
}
input.check-btn:not(:disabled) + a.btn_one {
  background: #2b2a27;
  border-color: #2b2a27;
  color: #fff;
}
input.check-btn:not(:disabled) + a.btn_one:hover {
  background: #fff;
  color: #2b2a27;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  input.check-btn,
  a.btn_one { transition: none; }
}

jQuery

//規約を一番下までスクロールするとボタンが押せる
$(function(){
  //disabledを設定しておく
  $('[type="checkbox"], .check-btn').prop('disabled', true);
  //一番下までスクロールするとボタンが押せる（ボタンのdisabledが外れる）
  var scrollend = false;
  $('.scroll_box').on('scroll', function(event){
    if (
      scrollend == false
      && event.target.clientHeight + event.target.scrollTop >= event.target.scrollHeight - 1
    ) {
      $(".check-btn").prop('disabled', false);
      scrollend = true;
    }
  });
});
見本ページをひらく（スクロールするとボタンが押せる）

規約を一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる、実装

少しアレンジしてみます。
一番下までスクロールすると、まずチェックボタンが活性化するようにしてみました。
そしてチェックボックスにチェックが付いたらボタンが押せるようになります。
再確認ですね。

コードを見る（HTML・CSS・jQuery）

HTML

<section>
  <div class="scroll_box">
    <p>一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。</p>
  </div>
  <form>
    <div>
      <input type="checkbox" id="check1" disabled>
      <label for="check1">ちゃんと読みました。</label>
    </div>
    <div>
      <input type="checkbox" id="check2" disabled>
      <label for="check2">本当にちゃんと読みました。</label>
    </div>
    <div class="btnArea">
      <input type="submit" value="" class="check-btn" disabled>
      <a href="https://125naroom.com/web/4208" target="_blank" class="btn_one">ボタン</a>
    </div>
  </form>
</section>

CSS

/*-------------
.scroll_box
-------------*/

.scroll_box {
  height: 150px;
  overflow: auto;
  background-color: #f3efe6;
  border: 4px solid #2b2a27;
  padding: 30px;
  margin: 0 0 20px;
}
.scroll_box p {
  margin: 0;
}

/*-------------
checkbox
-------------*/

form label {
  margin-left: 6px;
}
form input[type="checkbox"] {
  accent-color: #2b2a27;
}
form input[type="checkbox"]:disabled + label {
  color: #6b675f;
}

/*-------------
btn
-------------*/

.btnArea {
  max-width: 400px;
  margin: 20px auto 0;
  position: relative;
}
/* disabled のあいだは、透明の input をボタンの上にかぶせる */
input.check-btn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0);
  padding: 0;
  cursor: default;
  z-index: 1;
  outline: none;
  transition: .3s;
  box-sizing: border-box;
  appearance: none;
}
input.check-btn:not(:disabled) {
  z-index: -1;
}
a.btn_one {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e8e3d8;
  border: 2px solid #e8e3d8;
  border-radius: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  padding: 0 10%;
  color: #6b675f;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  position: relative;
  transition: .2s;
}
input.check-btn:not(:disabled) + a.btn_one {
  background: #2b2a27;
  border-color: #2b2a27;
  color: #fff;
}
input.check-btn:not(:disabled) + a.btn_one:hover {
  background: #fff;
  color: #2b2a27;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  input.check-btn,
  a.btn_one { transition: none; }
}

jQuery

//規約を一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる
$(function(){
  //disabledを設定しておく
  $('[type="checkbox"], .check-btn').prop('disabled', true);
  //一番下までスクロールするとチェックできる（checkboxの＃check1のdisabledが外れる）
  var scrollend = false;
  $('.scroll_box').on('scroll', function(event){
    if (
      scrollend == false
      && event.target.clientHeight + event.target.scrollTop >= event.target.scrollHeight - 1
    ) {
      $("#check1").prop('disabled', false);
      scrollend = true;
    }
  });
  //disabledのイベント解除設定
  var practicableEvent = function(self, target){
    target.prop('disabled', false);
    setTimeout(function(){
      self.prop('disabled', true);
    }, 0);
  }
  //checkboxの＃check1をチェックすると、checkboxの＃check2がチェックできる
  $("#check1").on({
    "click":function(){
      if(!scrollend) return;
      practicableEvent($(this), $("#check2"));
    },
    "change":function(){
      if(!scrollend) return;
      practicableEvent($(this), $("#check2"));
    }
  });
  //checkboxの＃check2をチェックするとボタンが押せる
  $("#check2").on({
    "click":function(){
      practicableEvent($(this), $(".check-btn"));
    },
    "change":function(){
      practicableEvent($(this), $(".check-btn"));
    }
  });
});
見本ページをひらく（スクロールするとチェックできる）

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

jQuery日本語リファレンス
jQuery（英語版）

さいごに

デザオ
おーこれこれー
デザコト
では、コーヒータイムにしましょう

ふたりの小言

関連記事

【jQuery】チェックボックスにチェックを入れるとボタンが活性化する
デザインのメモ 2022.12.31

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

tools toolkit コーディングの道具箱 コーディング中にさっと使う、フロントエンドの小さな道具箱。clamp() や px ⇄ rem、box-shadow など 26 のツールと、37 の用語集。