Question

0

161

Views

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:

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>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T23:14:11.588Z

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>

0

161

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

1 answers

0

Find remote jobs

Andres GPT