试图要求用户滚动到段落底部以启用按钮答案

【问题标题】：Trying to require a user to scroll to the bottom of paragraph to enable a button试图要求用户滚动到段落底部以启用按钮
【发布时间】：2015-07-30 20:36:35
【问题描述】：

我试图要求用户滚动到段落底部以启用按钮 - 几乎与此处提出的问题相同 Using jQuery, how do I force a visitor to scroll to the bottom of a textarea to enable the submit button? 并由 Christian Varga 回答。出于某种原因，当我使用该代码时，我无法获得相同的结果——我的标头信息中是否存在限制我这样做的内容，例如脚本信息。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>

textarea {      
width: 240px;
height: 200px;
overflow-y: scroll;
}

</style>
</head>

<body>

<form action="action.php">
<textarea readonly id="terms">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<button id="agreeButton" disabled>Button</button>
</form>


<script>

var activated = false;
$(document).scroll(function() {
if (!activated) {
var scrolled = $(document).scrollTop() + $(window).height();
var height = $(document).height();
var offset = height - scrolled;

if (offset == 0) {
  activated = true;
  $('#agreeButton').removeAttr('disabled');
    }
  }
});


</script>

</body>
</html>

这个小提琴源自http://jsfiddle.net/ETLZ8/。我基本上清除了除标题信息之外的所有内容，但没有让它工作。

【问题讨论】：

标签： jquery html

【解决方案1】：

您缺少 js 来强制禁用按钮，直到它们滚动。不加载是不会生效的。

【讨论】：

我使用的 JS 来自这个工作示例 jsfiddle.net/ETLZ8。即使小提琴正在工作，您是否建议我需要额外的 JS？
是的。你没有加载它。根据您的 html，您加载的只是引导程序和 jQuery。

【解决方案2】：

您还需要使用 jQuery 2.1.1。

var activated = false;
$(document).scroll(function() {
  if (!activated) {
    var scrolled = $(document).scrollTop() + $(window).height();
    var height = $(document).height();
    var offset = height - scrolled;

    if (offset == 0) {
      activated = true;
      $('#agreeButton').removeAttr('disabled');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="agreeButton" disabled>Button</button>

【讨论】：

添加您给我的建议后，我不确定我是否以正确的方式设置它，因为我似乎仍然缺少一些东西......