JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<div class="AcknowledgeOuterDiv">
      <div class="AcknowledgeInnerDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore pariatur quod sed dolore id veniam ad, laborum, quaerat vero voluptatum rerum magni iure natus soluta, recusandae, mollitia iste facere. Pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore pariatur quod sed dolore id veniam ad, laborum, quaerat vero voluptatum rerum magni iure natus soluta, recusandae, mollitia iste facere. Pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore pariatur quod sed dolore id veniam ad, laborum, quaerat vero voluptatum rerum magni iure natus soluta, recusandae, mollitia iste facere. Pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore pariatur quod sed dolore id veniam ad, laborum, quaerat vero voluptatum rerum magni iure natus soluta, recusandae, mollitia iste facere. Pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore pariatur quod sed dolore id veniam ad, laborum, quaerat vero voluptatum rerum magni iure natus soluta, recusandae, mollitia iste facere. Pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore pariatur quod sed dolore id veniam ad, laborum, quaerat vero voluptatum rerum magni iure natus soluta, recusandae, mollitia iste facere. Pariatur.</p>
      </div>
</div>
<span class="AcknowledgeCheckBox">
    <input id="MainContent_AcknowledgeCheckBox" type="checkbox" disabled="disabled">
    <label for="MainContent_AcknowledgeCheckBox">*I have read and understand the above disclaimer.</label>
</span>

CSS

.AcknowledgeOuterDiv
{
    float: left;
    width: 100%;
    height: 300px;
    overflow: auto;
}
.AcknowledgeInnerDiv
{
    float: left;
}

JavaScript

function disclaimerFunction() {
            $(".AcknowledgeOuterDiv").scroll(function() {
                var outerDiv = $(this);
                var innerDiv = $(">.AcknowledgeInnerDiv", $(this));
                var ScrollMod = 1;
                if (outerDiv.offset().top < innerDiv.outerHeight()) {
                    ScrollMod = -1;
                }
                if (Math.round((ScrollMod * innerDiv.offset().top) + outerDiv.height() + outerDiv.offset().top) >= innerDiv.outerHeight() && Math.abs(innerDiv.offset().top) != 0) {
                    $(".AcknowledgeCheckBox input").attr("disabled", false);
                    $(this).unbind("scroll");
                } else {
                    $(".AcknowledgeCheckBox input").attr("disabled", true);
                }
            });
        }