Skip to content Skip to sidebar Skip to footer
Home / Javascript

Javascript On Scroll To End

Post a Comment
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"