Question

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

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

我采购了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>

Answer 1

使用普通JS，它添加了一些我们需要检查的东西。请考虑以下事项：

获取LicenseAgreementElement：

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

现在我们有了元素

获取licenseAgreement textarea滚动到的数量。

textElement.scrollHeight

我们需要检查用户是否滚动了整个协议元素即。实际元素的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

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

1 个答案: