Javascript на прокрутке до конца - PullRequest
Новая
       8

Javascript на прокрутке до конца

3 голосов
/ 25 ноября 2008

Иногда установщики программного обеспечения вынуждают вас прокрутить до конца лицензионного соглашения до того, как поле «Я согласен». Как я могу произвести такой же эффект на веб-странице?

Ответы [ 3 ]

5 голосов
/ 25 ноября 2008 
<html>
    <head>
        <script type="text/javascript">
            function setupPage() {
                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;
                }
            }

            function handleScroll() {
                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>
            <textarea id="agreetext" rows="8" cols="40">Long agreement</textarea>
            <br/><br/>
            <input type="checkbox" id="agreebox" value="true"/> <label id="agreelabel" for="agreebox">I agree</label>
            <br/><br/>
            <input type="submit" value="Continue"/>
        </form>
        <script type="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>
1 голос
/ 09 апреля 2015

Я использовал текстовую область только для чтения, чтобы отобразить свое лицензионное соглашение. Обратите внимание, что этот код не будет работать, если текст лицензионного соглашения недостаточно длинный, чтобы текстовая область отображала полосу прокрутки. 

$(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);
            }
        }
    );
});

<textarea id="service-agreement-textarea" readonly="readonly">Long long text here</textarea>
<label>
  <input type="checkbox" id="accept-service-agreement-checkbox" />
   I accept the terms of the service agreement
</label>
1 голос
/ 08 марта 2012

Отличный бит кода, если вы также хотите изменить цвет на ярлыке рядом с флажком, просто измените код следующим образом: 

function setupPage() {
    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;
    }
}

function handleScroll() {
    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";
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...