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

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

Почему вы хотите это сделать?? Без обид, но это самая раздражающая и бесполезная «особенность» на свете!

— 25.11.2008 20:14

Думаю, это единственный верный ответ :)

— 25.11.2008 20:18

Для справки, это свело бы меня с ума.

— 07.03.2009 00:22

Как-то мой комментарий выше удалили. Я ответил Мортену, сказав, что это было сделано для выполнения запроса клиента. Таким образом, его ответ выше.

— 02.11.2009 18:25

javascript

25.11.2008 20:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 621

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

<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>

25.11.2008 20:08

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

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";
    }
}

08.03.2012 19:29

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

$(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>

09.04.2015 07:34

Другие вопросы по теме

Greasemonkey \ Кнопка JavaScript "Копировать в буфер обмена"

Насколько безопасно Greasemonkey?

Как скрыть следующую / сегодня / предыдущую навигацию в jQuery DatePicker и отключить анимацию?

Javascript "включает" стратегии

Публикация / отправка нескольких форм в jQuery

Как преобразовать буквальный объект в пользовательский объект в javascript?

Минималистичная кешируемая библиотека jQuery / javascript для iPhone?

Как лучше всего определять количество дней в месяце с помощью JavaScript?

Запускать код javascript после завершения загрузки

Обратные вызовы jQuery срабатывают слишком рано

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

Ответы 3

Другие вопросы по теме

Похожие вопросы