Skip to content Skip to sidebar Skip to footer

Javascript On Scroll To End

Sometimes software installers force you to scroll to the end of the EULA before the “I agree” box is enabled. How can I produce the same effect on a web page?

Solution 1:

<html><head><scripttype="text/javascript">functionsetupPage() {
                var agreement = document.getElementById("agreetext");
                var visibleHeight = agreement.clientHeight;
                var scrollableHeight = agreement.scrollHeight;
                if (scrollableHeight > visibleHeight) {
                    var checkbox = document.getElementById("agreebox");
                    checkbox.checked=false;
                    checkbox.disabled=true;
                    agreement.onscroll = handleScroll;
                }
            }

            functionhandleScroll() {
                var agreement = document.getElementById("agreetext");
                var visibleHeight = agreement.clientHeight;
                var scrollableHeight = agreement.scrollHeight;
                var position = agreement.scrollTop;
                if (position + visibleHeight == scrollableHeight) {
                    document.getElementById("agreebox").disabled=false;
                }
            }
        </script></head><body><form><textareaid="agreetext"rows="8"cols="40">Long agreement</textarea><br/><br/><inputtype="checkbox"id="agreebox"value="true"/><labelid="agreelabel"for="agreebox">I agree</label><br/><br/><inputtype="submit"value="Continue"/></form><scripttype="text/javascript">// We put this at the end of the page rather than in an document.onload// because the document.onload event doesn't fire until all images have loaded.setupPage();
        </script></body></html>

Solution 2:

Excellent bit of code, if you also want to change the color in the label next to the checkbox, just modify the code as follows:

functionsetupPage() {
    var agreement = document.getElementById("agreetext");
    var visibleHeight = agreement.clientHeight;
    var scrollableHeight = agreement.scrollHeight;
    if (scrollableHeight > visibleHeight) {
        var checkbox = document.getElementById("agreebox");
        checkbox.checked=false;
        checkbox.disabled=true;
        document.getElementById("agreelabel").style.color = "#777";
        agreement.onscroll = handleScroll;
    }
}

functionhandleScroll() {
    var agreement = document.getElementById("agreetext");
    var visibleHeight = agreement.clientHeight;
    var scrollableHeight = agreement.scrollHeight;
    var position = agreement.scrollTop;
    if (position + visibleHeight == scrollableHeight) {
        document.getElementById("agreebox").disabled=false;
        document.getElementById("agreelabel").style.color = "black";
    }
}

Solution 3:

I used a readonly textarea to display my license agreement. Note that this code will not work if the license agreement text is not long enough to make the textarea show a scroll bar.

$(function () {
    var serviceAgreementScrolled = false;
    $('#service-agreement-textarea').scroll(
        function () {
            if (this.scrollTop + $(this).height() + 30 >= this.scrollHeight) {
                serviceAgreementScrolled = true;
            }
        }
    );

    $('#accept-service-agreement-checkbox').change(
        function () {
            if ($(this).is(':checked') && !serviceAgreementScrolled) {
                alert('Please scroll to read the rest of the service agreement.');
                $(this).prop('checked', false);
            }
        }
    );
});
<textareaid="service-agreement-textarea"readonly="readonly">Long long text here</textarea><label><inputtype="checkbox"id="accept-service-agreement-checkbox" />
   I accept the terms of the service agreement
</label>

Post a Comment for "Javascript On Scroll To End"