I have a situation where I need to ensure that a user has scrolled to the bottom of a disclaimer before they can acknowledge it by checking a checkbox. Our legal department requires this extra step for compliance reasons. Here is an example of how the markup looks:
<div id="step2Disclaimer" style="height:50px;overflow-y:scroll">
<p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>
<p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>
</div>
<input type="checkbox" id="acknowledge" name="acknowledge" value="true">
<label class="styled" for="acknowledge">I acknowledge</label>
I am able to track when someone reaches the end of #acknowledge like this:
$('#step2Disclaimer').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('end reached');
}
});
However, my challenge lies in detecting whether or not someone has scrolled after checking the "acknowledge" checkbox. The condition isn't functioning as expected - specifically, I need to run a function if the checkbox is checked but the user has NOT scrolled to the bottom of "step2Disclaimer".
$(function() {
$('input[name="acknowledge"]').change(function(){
if ($(this).is(':checked') && ($('#step2Disclaimer').scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)) {
alert('checked but not scrolled');
}
});
});