Terms and Conditions modal read-detection - Plain Javascript (No libraries)

I'm trying to figure out a way to create a scrollable modal that detects when the reader has scrolled to the bottom before enabling the 'Agree' button. This is for a Terms and Conditions type of box. I am also trying to create this with nothing more than plain html, css, and javascript. This is what I have so far.

var termsModal = document.getElementById("terms-modal");

// Get the button that opens the modal
var agreeCheckbox = document.getElementById("agree-checkbox");

// Get the <span> element that closes the modal
var closeModal = document.getElementsByClassName("close")[0];

var modalContent = document.getElementsByClassName("modal-content");

var agreeButton = document.getElementById("agreeBtn");

var agreementContainer = document.getElementById("agreement");


// Enables agree button when user scrolls all the way down
// modalContent.scroll(function() {
//     var disable = (((agreementContainer.height())) >= (modalContent.scrollTop() + modalContent.height() + 1));
//     agreeButton.disabled = disable;
// })


// When user clicks agree button in modal, keeps agree checkbox checked
agreeButton.onclick = function() {
  agreeCheckbox.checked = true;
  termsModal.style.display = "none";
}

// When the user clicks the button, open the modal 
agreeCheckbox.onclick = function() {

  if (agreeCheckbox.checked === true) {
    termsModal.style.display = "block";
  } else {
    agreeCheckbox.checked === false;
  }
}

// When the user clicks on <span> (x), close the modal
closeModal.onclick = function() {
  termsModal.style.display = "none";
  agreeCheckbox.checked = false;
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    termsModal.style.display = "none";
    agreeCheckbox.checked = false;
  }
}

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  padding-bottom: 100px;
  left: 0;
  top: 0;
  scroll-behavior: smooth;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  /* overflow: auto; Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  overflow: hidden;
  border-radius: 5px;
}

.modal-header {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: 5%;
}

.modal-inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* align-self: center; */
  /* padding-bottom: 10%; */
  width: 70%;
  background-color: #fefefe;
  border: 1px solid #888;
  /* margin-bottom: 20%; */
  margin-right: 10%;
  margin-left: 10%;
  height: 450px;
  /* padding: 20px; */
  border-radius: 5px;
}

#agreement {
  height: 350px;
  margin-bottom: 5%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}


/* Modal Content */

.modal-content {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  background-color: #fefefe;
  margin: auto;
  /* padding: 20px; */
  border: 1px solid rgb(179, 179, 179);
  border-radius: 5px;
  width: 97%;
  /* margin-bottom: 20%; */
  overflow-y: scroll;
}

.modal-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<!-- <a href=""> -->
<input type="checkbox" id="agree-checkbox">
</>
<p>
  I HAVE READ THE <span><a href="">PRIVACY POLICY</a></span> AND AGREE TO THE <span><a href="">TERMS AND CONDITIONS</a></span> OF THIS AGREEMENT.
</p>
<!-- </a> -->


<!-- The Modal -->
<div id="terms-modal" class="modal">

  <div class="modal-inner-container">
    <div class="modal-header">
      <span class="close">&times;</span>
    </div>

    <!-- Modal content -->
    <div class="modal-content">


      <!-- <p>Some text in the Modal..</p> -->
      <div id="agreement" class="termsImages">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae reprehenderit est, hic esse, numquam omnis autem exercitationem eum a nobis perspiciatis et labore voluptatibus accusamus molestias eveniet laboriosam amet cumque ut, fuga soluta atque
          porro eaque voluptatem? Doloremque, culpa modi. Corrupti optio similique excepturi inventore architecto ipsum, officiis explicabo sunt ducimus, iusto dolorum animi eius pariatur fuga consectetur rerum? Ratione, amet. Explicabo culpa accusamus
          consectetur esse odio quis, unde officiis quidem veniam, doloremque sed modi error tenetur eligendi quisquam molestiae, ut dicta suscipit nisi officia necessitatibus voluptatem ex delectus. Praesentium tenetur consequuntur repellendus voluptatum,
          dolorem adipisci. Voluptate ab repellendus eum nobis alias quae corporis odit quasi unde, aut pariatur quod! Laboriosam qui quisquam minima quia, eum perspiciatis odio non ullam ipsum culpa quae iste voluptatum velit aspernatur? Nisi vitae dolor
          fuga dignissimos facere culpa voluptate, delectus ipsam iste laboriosam at iure. Quod porro perferendis modi laboriosam, error expedita explicabo similique et ex, facilis dignissimos natus, tenetur cupiditate iure tempora debitis aspernatur
          repudiandae sequi voluptatem eos blanditiis! Veritatis pariatur hic illum. Nemo laboriosam aliquam reiciendis! Voluptas sequi modi nisi veniam error vel aperiam a ab ipsam, nam porro rerum laudantium totam corporis suscipit maiores quam nihil
          temporibus asperiores, ex consequuntur doloremque! Illo nisi tenetur minima consectetur ad iste non molestias fugit, laborum molestiae delectus fugiat saepe quos dolorum? Magni nobis consequatur ut maiores adipisci magnam rem ex odit nesciunt
          ullam temporibus rerum quis, nostrum distinctio quisquam facilis quia ducimus necessitatibus impedit earum deleniti. Mollitia, tempore minima? Atque molestiae perspiciatis velit dolore eius? Nisi id aperiam magnam consequatur eum distinctio,
          architecto aliquid temporibus. Natus accusantium magni fugit aliquid, libero ratione. Modi maiores asperiores, consectetur dignissimos impedit eaque similique culpa quo obcaecati sequi rerum possimus assumenda! Modi nesciunt alias quisquam quas!
          Quas, maiores. Molestias tenetur nihil, ducimus nam a possimus fugit minima fugiat assumenda dolor molestiae soluta delectus veritatis laborum laudantium quia quae magnam porro saepe quibusdam doloremque. Dignissimos quaerat laborum possimus
          quis nisi at, sequi delectus, quasi inventore tempore facilis modi repudiandae? Aperiam dolores quos inventore eveniet mollitia est ipsa. Nihil repellat molestiae possimus qui itaque! Cum id recusandae error et dolor beatae iure quidem dolorem
          ratione, eveniet, consequuntur laborum veritatis. Sapiente quis nostrum possimus illo nihil quisquam consequuntur. Commodi quidem nisi rem porro impedit at, praesentium qui non fugiat aspernatur illo reiciendis et quos soluta atque similique
          aut? Dolore illum quas obcaecati laboriosam, eos tempora delectus ex rerum iure, temporibus soluta voluptates. Neque recusandae, aspernatur inventore voluptatibus sint quae? Quibusdam repellendus deserunt nobis illo adipisci iste. Sed explicabo
          dolore accusantium, inventore repellat ratione praesentium minus magni doloremque, itaque ab sunt error, at ut consectetur repudiandae ullam ea repellendus distinctio? Illum modi similique rerum tenetur odit ad quae, vitae architecto repellendus
          illo harum iste quas iusto eveniet molestiae reprehenderit ab nisi quasi ullam. Aliquid enim vero hic ipsam natus consequuntur, at repellat ipsa inventore, sequi veritatis eveniet deserunt illum ut? Error a autem sint consequatur, nulla totam
          quisquam. Dicta repellendus iste corporis ut? Iusto aperiam aut placeat recusandae similique quis perspiciatis fugit molestiae sapiente consectetur voluptates, quia quae tempora error obcaecati eum perferendis exercitationem ipsam delectus!
          Saepe earum, alias hic dignissimos deleniti doloribus, minus architecto aliquam odio explicabo vitae ab, blanditiis numquam. Itaque nihil deleniti omnis nobis, vitae odit quam nam excepturi neque officiis iste ducimus quidem tenetur recusandae
          voluptatem exercitationem, iure sequi sed eum repudiandae fugiat similique? Rem nostrum quidem in quia magnam necessitatibus placeat magni voluptate, dolorum quos adipisci molestiae quibusdam tempora sed, aperiam illum odio excepturi. Voluptate
          nostrum natus, fugit perspiciatis tempora cupiditate officia alias eos, ducimus ad dolore autem excepturi laborum! Distinctio ad aliquid quibusdam odio nemo, itaque, totam inventore velit corporis illo, facere maxime consectetur fugit consequuntur
          necessitatibus quia. Debitis adipisci recusandae dicta illo quisquam, tempora voluptas id odit et commodi ab, excepturi iure velit explicabo libero aliquid asperiores officiis vitae aperiam eius? Accusantium sint a labore, pariatur dolores,
          veniam ipsa quae ab blanditiis consequuntur tempore optio vel aperiam sunt! Dolorem eius adipisci magni ab corrupti, dolor modi recusandae qui ut nam quasi minima ea voluptas ullam corporis blanditiis commodi iure voluptates obcaecati, ducimus
          velit explicabo? Laborum sit temporibus magni illum qui assumenda porro inventore totam suscipit vero esse perferendis tenetur voluptates eligendi ratione, tempora maiores ex alias sequi impedit amet error. Voluptate, nobis labore, maxime eius
          repudiandae iusto culpa quidem nisi quo, dicta consectetur sint! Et officiis itaque deleniti qui delectus molestiae, doloribus, cumque dolores fugiat inventore quisquam mollitia similique consequuntur sapiente. Nihil vero quod, fugit rerum consequuntur
          ipsam magnam quibusdam blanditiis amet aut iusto corporis qui repellendus odit reiciendis maxime et sit dolore nam. Eligendi repellendus, at modi deserunt accusamus voluptate expedita eos culpa adipisci, voluptatum sed veniam quaerat quod quibusdam
          distinctio natus animi odio maxime facere repudiandae! Minus dolore eum illum numquam! Labore velit enim amet at doloribus esse magnam natus eaque provident mollitia!
        </p>

      </div>


    </div>

    <div class="modal-footer">
      <p class="instructions">Please read through to the end of the Agreement to enable the AGREE button.</p>
      <button type="button" id="agreeBtn" class="agree-Btn" data-dismiss="modal" aria-hidden="true">AGREE</button>
    </div>

  </div>

</div>

It's not currently working. Any help is appreciated!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/BVjrMYg