Кнопка Отключить / Включить условно в зависимости от положения прокрутки - PullRequest
Новая
       0

Кнопка Отключить / Включить условно в зависимости от положения прокрутки

3 голосов
/ 06 октября 2011

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

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

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

Я довольно новичок в javascript, и любая помощь будет принята с благодарностью. 

   <head>
    <title>Scroll Test</title>
    <script language="JavaScript">
    </script>
</head>

<body>

<form name="form22" action="javascript: alert('Form submitted!');" onSubmit="return formValidation(this);">

    <p>
    License Agreement:<br />
    <textarea 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>
    </p>

    <p>
    <input name="button" type="checkbox" value="Submit" disabled> I agree
    </p>

</form>

</body>
</html>

1 Ответ

4 голосов
/ 06 октября 2011

Используя обычный JS, он добавляет несколько вещей, которые мы должны проверить.Рассмотрим следующее:

Получите элемент LicenseAgreementElement:

var textElement = document.getElementsByName("licenseAgreement")[0]

Теперь, когда у нас есть элемент,

Получите, на сколько прокручивается текстовое поле licenseAgreement.

textElement.scrollHeight

Нам необходимо проверить, прокрутил ли пользователь весь элемент AgreementElement, т.е.scrollTop + height фактического элемента.

textElement.scrollTop + textElement.offsetHeight >= textElement.scrollHeight

Прикрепление и прослушивание событий при запуске предоставляет нам следующее: 

document.getElementsByName("licenseAgreement")[0].addEventListener("scroll", checkScrollHeight, false);

function checkScrollHeight(){
    var textElement = document.getElementsByName("licenseAgreement")[0] 
    if ((textElement.scrollTop + textElement.offsetHeight) >= textElement.scrollHeight){
        document.getElementsByName("button")[0].disabled = false;
    }
}

Включениефлажок при выполнении условия.

Наконец небольшой пример времени: JSFiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...