Question

我试图要求用户滚动到段落的底部以启用按钮 - 几乎与此处提出的问题相同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/。我基本上清除了除标题信息之外的所有内容，但没有让它工作。

Answer 1

你错过了js以强制按钮被禁用，直到它们滚动。如果你没有加载它，它就不会生效。

Answer 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>

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

2 个答案: