0
165
ViewsCómo detectar si la barra de desplazamiento llegó al final usando JavaScript
Estoy tratando de implementar una función en una página de términos y condiciones donde el botón Aceptar estará deshabilitado hasta que el usuario se desplace por todas las condiciones hasta el final. Entonces, traté de seguir un ejemplo existente ( http://jsfiddle.net/dy8bqzkm/ ) y cambiar lo que mejor se adapte a mi escenario, pero sigo enfrentando problemas y errores. ¿Alguna idea sobre cómo implementar esta característica correctamente?
Mensaje de error: 
Código HTML:
<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>Código JavaSript:
<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>
·
Juan Pablo Isaza
1 answers
Answer question0
Elimine la primera matriz de selección en sus elementos de selección y cambie el nombre de "getElementById", cambie a:
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; } }Refactorización de sugerencias:
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>
·
Juan Pablo Isaza
Report
Answer question