Div Bottom Scroll Detection


/ Published in: jQuery
Save to your folder(s)

This detects if a user has scrolled to the bottom of an overflow div and enables the checkbox. Can be used for terms of service acceptance, etc.


Copy this code and paste it in your HTML
  1. <div id="scrollPane" style="height:150px;overflow-y:scroll;">
  2. <div class="inner">
  3. Terms of service jargon stuff here
  4. </div>
  5. </div>
  6. <input name="TERMS_ACCEPTED_YN" type="checkbox" id="TERMS_ACCEPTED_YN" value="Y"><label>I accept the blah, blah, blah.</label>
  7.  
  8. jQuery(document).ready(function() {
  9. jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);
  10.  
  11. var $box = $("#scrollPane"),
  12. $inner = $("> .inner", $box),
  13. innerOuterHeight = $inner.outerHeight();
  14. boxHeight = $box.height();
  15. boxOffsetTop = $box.offset().top;
  16.  
  17. jQuery("#scrollPane").scroll(function() {
  18. if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {
  19. jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
  20. }
  21. });
  22. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.