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

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

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

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

See the Pen 【jQuery】規約を一番下までスクロールするとボタンが押せる by 125naroom (@125naroom) on CodePen.

HTMLと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>

jQuery

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

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

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

See the Pen 【jQuery】規約を一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる by 125naroom (@125naroom) on CodePen.

HTMLと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>

jQuery

//規約を一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる
$(function(){  
  //disabledを設定しておく
  $('[type="checkbox"], .check-btn').prop('disabled', true);
  //一番下までスクロールするとチェックできる(checkboxの#check1のdisabledが外れる)
  var scrollend = false;
  $('.scroll_box').scroll(function(event){
    if (
      scrollend == false
      && event.target.clientHeight + event.target.scrollTop >= event.target.scrollHeight
    ) {
      $("#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の日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

さいごに

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

関連記事

Author

デザコト

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

Googleさんの
おすすめ

4

/

14

2024

Googleさんの
おすすめ

4

/

14

2024

デザインの記事

TALKING CITY|柏の葉イノベーションフェス2023
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集