Advanced Search

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.

Expand | Embed | Plain Text

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.