Question

我的html示例div类：

<div id="terms">
    <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
    </p>

    <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
    </p>
    <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
    </p>

</div>

<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>

我的css：

#terms {width: 780px;height: 150px;overflow-y: scroll;border:2px solid #ccc;}

有人告诉我JS或JQuery在用户滚动到T＆amp; C页面底部时启用复选框吗？我也尝试过其他答案，但都没有奏效。无论我做什么，复选框都会被禁用。

Answer 1

使用以下脚本，

<script>
$( document ).ready( function() {
 $('#terms').scroll(function () {
  if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
    $('#payment').removeAttr('disabled');
    }
 });
});
</script>

这里是runnable demo：https://jsbin.com/cajusebera/edit?html,js,output

Answer 2

我不是Jquery专家，但只是通过谷歌搜索我创建了这个例子。我希望它有所帮助！

jQuery(function($) {
  $('#terms').on('scroll', function() {
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
      $('#payment').removeAttr("disabled")
    }
  })
});

#terms {
  width: 780px;
  height: 150px;
  overflow-y: scroll;
  border: 2px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terms">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
    posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
    blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
    posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
    blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
    posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
    blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
    posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
    blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
    posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
    blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
  </p>

</div>

<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>

当用户滚动到T＆amp; C页面底部时启用复选框？

2 个答案: