How to detect if an overflow has been scrolled to the bottom?

Question

I'm making a terms and conditions page and it uses an overflow when on mobile. I'm trying to create a function which will detect when the user has scrolled to the bottom and the affectivly enabling my submit button. The problem is I don't knwo how I can detect this type of user input with Javascript, if anyone could shed some light on this I'd really appriate it.

.mainContainer {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

.txtContainer {
  height: 250px;
  overflow-y: auto;
}

.btnContainer {
  margin-top: 20px;
}

.btn {
  width: 100%;
  height: 60px;
  font-size: 20px;
}

<div class="mainContainer">
  <div class="txtContainer">
    <p>Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... </p>
  </div>
  <div class="btnContainer">
    <button class="btn" disabled>Submit</button>
  </div>
</div>

Thanks in advance, Spud.

I wonder what percentage of people who Scroll to the Bottom actually read the T&C — James, Jul 24 '20 at 18:13
Similar question - https://stackoverflow.com/questions/3962558/javascript-detect-scroll-end — James, Jul 24 '20 at 18:15

score 0 · Accepted Answer · answered Jul 24 '20 at 18:19

This will detect scrolling of the object and disable the button by default then once it reaches the bottom, it will enable the button. If the user scrolls back up, the button is disabled but that is easy to overwrite if its not what you are looking for.

var txt = document.querySelector(".txtContainer");
var btn = document.querySelector(".btn");

txt.addEventListener("scroll",function(e){
   btn.disabled = true;
   if(e.target.offsetHeight + e.target.scrollTop == e.target.scrollHeight){
      btn.disabled = false;
   }
});

.mainContainer {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

.txtContainer {
  height: 250px;
  overflow-y: auto;
}

.btnContainer {
  margin-top: 20px;
}

.btn {
  width: 100%;
  height: 60px;
  font-size: 20px;
}

<div class="mainContainer">
  <div class="txtContainer">
    <p>Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... </p>
  </div>
  <div class="btnContainer">
    <button class="btn" disabled>Submit</button>
  </div>
</div>

How to detect if an overflow has been scrolled to the bottom?

1 Answers1