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

user_14909277 0
Viewed 43

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>
scrollbar html jquery javascript
1 Answers

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>

user_150859400
Related