Element: scrollHeight-Eigenschaft

Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= 1;

element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight;

function isOverflowing(element) {
  return element.scrollHeight > element.clientHeight;
}

function isScrollable(element) {
  return (
    isOverflowing(element) &&
    ["scroll", "auto"].includes(window.getComputedStyle(element).overflowY)
  );
}

<p id="info">Read all text to agree</p>
<div id="very-important-read">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Feugiat sed lectus
    vestibulum mattis. Id consectetur purus ut faucibus pulvinar elementum
    integer enim neque. Metus vulputate eu scelerisque felis imperdiet. Massa
    massa ultricies mi quis hendrerit dolor magna eget est. Rhoncus aenean vel
    elit scelerisque mauris pellentesque. Volutpat est velit egestas dui id
    ornare arcu. Id cursus metus aliquam eleifend mi in. Condimentum lacinia
    quis vel eros donec ac. Feugiat pretium nibh ipsum consequat nisl vel
    pretium lectus.
  </p>
  <p>
    Sit amet volutpat consequat mauris nunc congue nisi vitae. Viverra accumsan
    in nisl nisi scelerisque. Enim ut tellus elementum sagittis vitae. Dolor sed
    viverra ipsum nunc aliquet bibendum enim facilisis. Nisi scelerisque eu
    ultrices vitae. Sem fringilla ut morbi tincidunt augue interdum velit.
    Senectus et netus et malesuada fames ac turpis egestas. Nunc non blandit
    massa enim nec. At augue eget arcu dictum varius duis at. Dictumst quisque
    sagittis purus sit amet. Ut eu sem integer vitae justo. Mollis aliquam ut
    porttitor leo a diam sollicitudin. Mollis nunc sed id semper risus in. Eu
    volutpat odio facilisis mauris sit. Augue interdum velit euismod in
    pellentesque massa placerat duis. Aliquam faucibus purus in massa tempor nec
    feugiat. Nisl rhoncus mattis rhoncus urna neque viverra justo. Leo duis ut
    diam quam nulla. Ultrices dui sapien eget mi proin sed libero enim.
  </p>
  <p>
    Cras adipiscing enim eu turpis egestas. Est ultricies integer quis auctor
    elit. Tempor id eu nisl nunc mi ipsum. Non nisi est sit amet facilisis. Nisl
    suscipit adipiscing bibendum est ultricies integer quis. Habitant morbi
    tristique senectus et netus et malesuada. Etiam erat velit scelerisque in
    dictum non consectetur a erat. Diam sollicitudin tempor id eu nisl. Aenean
    vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. A
    pellentesque sit amet porttitor. Viverra aliquet eget sit amet tellus cras.
    Eu ultrices vitae auctor eu.
  </p>
  <p>
    Fames ac turpis egestas sed tempus. Id donec ultrices tincidunt arcu non
    sodales. Congue mauris rhoncus aenean vel elit scelerisque mauris
    pellentesque. Velit scelerisque in dictum non consectetur a erat nam. Auctor
    elit sed vulputate mi sit amet mauris commodo. Mauris ultrices eros in
    cursus turpis massa tincidunt. Dui sapien eget mi proin sed libero enim sed
    faucibus. Ipsum dolor sit amet consectetur adipiscing elit pellentesque
    habitant. Amet massa vitae tortor condimentum. Feugiat nisl pretium fusce id
    velit. Malesuada proin libero nunc consequat interdum varius sit. Quam nulla
    porttitor massa id neque aliquam vestibulum morbi blandit. Gravida arcu ac
    tortor dignissim convallis aenean et tortor at. Dapibus ultrices in iaculis
    nunc sed. Fermentum et sollicitudin ac orci phasellus egestas tellus. Proin
    libero nunc consequat interdum varius sit amet mattis. Sed viverra ipsum
    nunc aliquet bibendum.
  </p>
</div>
<p>
  <input type="checkbox" id="agree" name="accept" disabled />
  <label for="agree">I agree</label>
  <input type="button" id="next-step" value="Next" disabled />
</p>

#info {
  margin: 5px;
  display: inline-block;
  font-style: italic;
}

#very-important-read {
  height: 130px;
  padding: 5px;
  border: 2px solid #00b4c5;
  border-radius: 5px;
  overflow: scroll;
}

const info = document.getElementById("info");
const toAgree = document.getElementById("agree");
const toNextStep = document.getElementById("next-step");
const veryImportantRead = document.getElementById("very-important-read");

// Check if user has scrolled the element to the bottom
function isRead(element) {
  return (
    Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <=
    1
  );
}

function checkScrollToBottom(element) {
  if (isRead(element)) {
    info.innerText = "You have read all text. Agree to continue.";
    toAgree.disabled = false;
  }
}

toAgree.addEventListener("change", (e) => {
  toNextStep.disabled = !e.target.checked;
});

veryImportantRead.addEventListener("scroll", () => {
  checkScrollToBottom(veryImportantRead);
});

toNextStep.addEventListener("click", () => {
  if (toAgree.checked) {
    toNextStep.value = "Done!";
  }
});