jQuery: verificare l'accettazione dei termini legali attraverso l'evento scroll

La lettura dei termini e delle condizioni d'uso di un prodotto è un requisito legale fondamentale. Sul Web per assicurarsi che gli utenti abbiano effettivamente letto tali condizioni (come l'accettazione della privacy) si può associare allo scroll dell'elemento contenitore una verifica che mostrerà solo in ultimo il pulsante o la checkbox per consentire all'utente di dare il suo consenso. Vediamo come implementare questa soluzione con jQuery.

Partiamo dalla seguente marcatura:

<div id="privacy-terms">
	<div id="privacy-wrapper">
	  <!-- contenuti -->
	</div>
</div>
<p id="agree"><label for="i-agree"><input type="radio" value="yes" id="i-agree" name="i-agree" /> I agree</label></p>

Con i CSS dobbiamo rendere l'area di contenuto scrollabile e nascondere inizialmente la casella di selezione:

#privacy-terms {
	width: 400px;
	height: 150px;
	overflow: auto;
	background: #eee;
}

#agree { display: none; }

A questo punto con jQuery dobbiamo utilizzare l'evento scroll per verificare l'avanzamento della lettura basandoci sulle altezze degli elementi e sull'offset verticale:

$(function() {
	var $privacy = $('#privacy-terms'),
	    $privacyWrapper = $('#privacy-wrapper'),
		  $agree = $('#agree'),
		  height = $privacy.height(),
		  top = $privacy.offset().top,
		  privacyWrapperHeight = $privacyWrapper.outerHeight();
	
	$privacy.on('scroll', function() {
			 if (Math.ceil(height - $privacyWrapper.offset().top + top) >= privacyWrapperHeight ) {
			 		$agree.show();
			 }
	
	});

});