jQuery code snippet to detect if a user has scrolled to the bottom of the page (or div with scroll) before enabling the terms and conditions checkbox.

<div id="scrollPane" style="height:150px;overflow-y:scroll;">
 <div class="inner">
  Terms of service jargon stuff here
<input name="TERMS_ACCEPTED_YN" type="checkbox" id="TERMS_ACCEPTED_YN" value="Y"/><label>I accept the blah, blah, blah.</label>

jQuery(document).ready(function() {
	jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);
	var $box = $("#scrollPane"),
	$inner = $("> .inner", $box),
	innerOuterHeight = $inner.outerHeight();
	boxHeight = $box.height();
	boxOffsetTop = $box.offset().top;
	jQuery("#scrollPane").scroll(function() {
		if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {
Sam Deering Sam Deering
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

No Reader comments

Stay ahead of the game Exclusive content for developers and digital experts Go Premium