스크롤 하단 체크하기

스크롤 이벤트 중 영역의 마지막 체크하기

<form name="registration">
  <p>
      <textarea id="rules">Lorem ipsum dolor....
      </textarea>
  </p>
  <div>
    <p class="noti">끝까지 읽어주세요</p>
    <input type="checkbox" name="accept" id="agree" disabled>
    <label for="agree">동의합니다</label>
    <input type="submit" id="nextstep" value="다음" disabled>
    </div>
</form>

#notice {
  display: inline-block;
  margin-bottom: 12px;
  border-radius: 5px;
  width: 600px;
  padding: 5px;
  border: 2px #7FDF55 solid;
}

#rules {
  width: 600px;
  height: 130px;
  padding: 5px;
  border: #2A9F00 solid 2px;
  border-radius: 5px;
}

.noti {
  margin: 0;
  color: red;
}

function read() {
  var box = $('#rules');
  var chkBox = $('#agree');
  var nextBtn = $('#nextstep');
  var noti = $('.noti');
  var boxHeight = box.outerHeight();
  var boxSrcollHeight = box[0].scrollHeight;

  box.on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    //console.log( boxHeight, boxSrcollHeight, scrollTop )
    if ((boxSrcollHeight - scrollTop) < boxHeight) {
      chkBox.removeAttr('disabled');
      nextBtn.removeAttr('disabled');
      noti.text('감사합니다');
    }
  })
}

read();

 

jsfiddle에서 보기

https://jsfiddle.net/hyuckjin/craek5os/