Scrolled into view

https://stackoverflow.com/questions/45172807/scrolling-div-must-be-scrolled-to-bottom-before-you-can-check-a-checkbox#45173240

by dixalex

HTML

<script src="https://survey.researchresults.com/survey/selfserve/53b/170703/jquery.appear.js"></script>
<script src="https://survey.researchresults.com/survey/selfserve/53b/170703/appear.min.js"></script>
<div id="step2Disclaimer">
    <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 class='agreement_read'>?</div>
</div>

<input class='unread' type="checkbox" id="acknowledge" name="acknowledge" value="true" disabled>
<label class="styled unread" for="acknowledge">I acknowledge</label>

CSS

#step2Disclaimer {
    width: 315px;
    border: solid 1px #ACE;
    margin-bottom: 15px;
    height: 115px;
    overflow-y: scroll;
    font-family: arial;
    font-size: 1rem;
    padding: 3px;
}

.hide {
    left: -9999px !important;
    position: absolute !important;
    visibility: hidden;
    z-index: -500;
    top: -9999px;
}

div.agreement_read {
    width: 1px;
    height: 1px;
    overflow: hidden;
    display: block;
    clear: both;
}

.unread {
    cursor: not-allowed;
    border: dashed 1px red;
    padding: 3px;
	color: #CCC;
}

.fully_read {
    border: solid 1px green;
    padding: 3px;
}

JavaScript

var master_agreement = document.getElementById('step2Disclaimer');

jQuery(master_agreement).scroll(function(e) {
    if (isScrolledToBottom(master_agreement) && jQuery('.unread').length) {
        jQuery('.unread').removeClass('unread').addClass('fully_read');
		jQuery('#acknowledge').prop('disabled', false);
    }
});

//Chris Martin of StackOverflow - https://stackoverflow.com/a/32283147/5076162
function isScrolledToBottom(el) {
    var $el = $(el);
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}