javascript - 根据滚动位置有条件地禁用/启用按钮

一旦用户滚动到表单的条款和条件部分的底部，我需要激活一个复选框。这将是电子商务网站结帐页面一部分的一部分。

我在这里看到了有关此问题的争论，但是根据我们的律师的说法，出于责任原因，必须在我们的网站上采用这种方式。滚动框末尾的接受按钮将是最后的选择，因为这似乎使我们一些认为根本不存在的用户感到困惑，无论我们向他们提供多少有关按钮位置的信息。

我获取了this代码并对其进行了操作，以使其尝试执行我想要的操作。我的代码在下面列出。它不起作用。我已经成功禁用了该按钮，但是似乎无法重新激活它。

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

最佳答案

使用普通的JS，它增加了一些我们需要检查的内容。考虑以下:

var textElement = document.getElementsByName("licenseAgreement")[0]
现在我们有了元素，

textElement.scrollHeight

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

关于javascript - 根据滚动位置有条件地禁用/启用按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7670357/