根据滚动位置有条件地禁用/启用按钮 [英] Disable/Enable button conditionally based on scroll position
问题描述
一旦用户滚动到表单的条款和条件部分的底部，我就需要激活一个复选框。这将是电子商务网站结帐页面的一部分。
I need to activate a checkbox once a user has scrolled to the bottom of a terms and conditions section of a form. The will be a section in part of a checkout page for ecommerce site.
我在这里看到了关于此的论点，但根据我们的律师，它必须是这样的在我们的网站上出于责任原因。滚动框末尾的接受按钮将是最后的选择，因为它似乎会让我们的一些用户感到困惑，因为无论我们向他们提供关于按钮位置的信息多少，他们都认为它根本不存在。
I have seen arguments on here about this, but per our lawyers, it has to be this way on our site for liability reasons. An accept button at the end of the scroll box would be the last resort, as it seems to confuse some of our users who think it is not there at all no matter how much info we give them about where the button is.
我采购了这个代码并操纵它试图让它做我想要的。我的代码如下所示。它不起作用。我已成功禁用该按钮，但我似乎无法重新激活它。
I sourced this code and manipulated it to try and get it to do what I wanted. My code is listed below. It doesn't work. I have successfully disabled the button, however I cannot seem to reactivate it.
我对javascript很新，任何帮助都将非常感谢。
I am pretty new to javascript and any help would be greatly appreciated.
<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它会添加一些我们需要的东西校验。请考虑以下事项：
Using normal JS it adds a few things we need to check. Consider the following:
获取LicenseAgreementElement：
Get the LicenseAgreementElement:
var textElement = document.getElementsByName（licenseAgreement）[0]
现在我们有了element，
Now that we have the element,
获取licenseAgreement textarea滚动到的数量。
Get how much the licenseAgreement textarea scrolls to.
textElement.scrollHeight
我们需要检查是否用户已经滚动了
整个AgreementElement即。实际元素的scrollTop + height。
textElement.scrollTop + textElement.offsetHeight> = textElement.scrollHeight
在开始时附加和事件监听器为我们提供了以下内容： / p>
Attaching and event listener at the start provides us with the following:
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;
}
}
满足条件时启用复选框。
Enabling the checkbox when the condition is met.
最后一小段时间的例子： JSFiddle
Finally a small time example : JSFiddle
这篇关于根据滚动位置有条件地禁用/启用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
