'How to detect if the scroll bar reached the end using JavaScript

I'm trying to implement a feature in a terms and conditions page where the Agree button will be disabled until the user scrolls over all the conditions till the end. So, I tried to follow an existing example (http://jsfiddle.net/dy8bqzkm/) and change what best fits into my scenario, but I keep facing issues and errors. Any idea on how to implement this feature correctly?

Error message: Error Message

HTML code:

<div class="container w-container">
      <div class="termsdiv">
        <div class="policy-section" style="max-height: 250px; overflow-y: auto;" 
             id="PolicySection">

          <!-- Policy conditions are listed here between list and paragraph tags-->
        
        </div>
      </div>
    
      <div class="buttonblok">
        <button type="submit" class="agree w-button" id="AgreeBtn" disabled>I Agree</button>
        <button type="submit" class="cancel w-button" id="CancelBtn">Cancel</button>
      </div>
    
    </div>

JavaSript code:

<script>
    document.getElementsById("PolicySection")[0].addEventListener("scroll", checkScrollHeight, 
    false);

    function checkScrollHeight() {
        var policyElement = document.getElementsById("PolicySection")[0]
        if ((policyElement.scrollTop + policyElement.offsetHeight) >= policyElement.scrollHeight) 
        {
            document.getElementsById("AgreeBtn")[0].disabled = false;
        }
    }
 </script>
javascripthtmljqueryscrollbar


Solution 1:[1]

Remove the first select array in your selection elements, and rename "getElementById", change to:

document.getElementById("PolicySection").addEventListener("scroll", checkScrollHeight, 
false);

function checkScrollHeight() {
    var policyElement = document.getElementById("PolicySection")
    if ((policyElement.scrollTop + policyElement.offsetHeight) >= policyElement.scrollHeight) 
    {
        document.getElementById("AgreeBtn").disabled = false;
    }
}

Suggestion refactor:

const licenseField = document.getElementById("licenseField");

licenseField.onscroll = () => this.checkScrollHeight();

checkScrollHeight = () => {
  const agreeButton = document.getElementById("AgreeBtn");
  const shouldEnableAgreeButton = !((licenseField.scrollTop + licenseField.offsetHeight) >= licenseField.scrollHeight);

  agreeButton.disabled = shouldEnableAgreeButton;
}
<div class="container w-container">
  <div class="termsdiv">
    <div class="policy-section" style="max-height: 250px; overflow-y: auto;" 
         id="PolicySection">

    <p>License Agreement:<br /></p>
    <textarea id="licenseField" name="licenseAgreement" rows="10" cols="45">This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

</textarea>

    </div>
  </div>
    
  <div class="buttonblok">
    <button type="submit" class="agree w-button" id="AgreeBtn" disabled>I Agree</button>
    <button type="submit" class="cancel w-button" id="CancelBtn">Cancel</button>
  </div>
    
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions