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

Question

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

javascriptformsscroll

5

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

我已经看到有关此事的争论，但根据我们的律师，出于责任原因，必须在我们的网站上采用这种方式。如果滚动框的末尾有一个接受按钮将是最后的办法，因为似乎会让我们的一些用户感到困惑，无论我们多少信息告诉他们按钮在哪里都是如此。

我引用了这个代码，并对其进行了修改以尝试使其按照我所需的方式运行。我的代码如下所示。它不能正常工作。我已成功禁用了该按钮，但似乎无法重新激活它。

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

- Ashley

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cillierscharl · Accepted Answer

使用普通的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。