以下の例には、コンテンツとしていくつかの利用規約を持つ terms div があります。ユーザーが div を下にスクロールすると、チェックボックスが有効になります。これは、IE 7/8/9 標準の IE 7 でのみ機能しません (開発者ウィンドウから標準オプションを変更しています)。以下は私のhtml、css、およびjsです:
<body>
<div id="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui vel velit bibendum cursus. Nunc eget lacus vitae nulla euismod elementum ornare ac urna. Nam enim est, bibendum eu ultricies eu, mollis vitae lacus. Duis porta vulputate feugiat. Nullam eu iaculis lacus. Aliquam adipiscing posuere consequat. Donec et dui non massa congue eleifend. Nunc tortor diam, luctus eget mollis sit amet, posuere nec lectus. Morbi sit amet ultricies nisi. Nam sodales quam non mi tristique sollicitudin. Vestibulum vel augue eget mi tincidunt commodo. Sed egestas metus nibh, et vestibulum augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui vel velit bibendum cursus. Nunc eget lacus vitae nulla euismod elementum ornare ac urna. Nam enim est, bibendum eu ultricies eu, mollis vitae lacus. Duis porta vulputate feugiat. Nullam eu iaculis lacus. Aliquam adipiscing posuere consequat. Donec et dui non massa congue eleifend. Nunc tortor diam, luctus eget mollis sit amet, posuere nec lectus. Morbi sit amet ultricies nisi. Nam sodales quam non mi tristique sollicitudin. Vestibulum vel augue eget mi tincidunt commodo. Sed egestas metus nibh, et vestibulum augue.
</div>
<input type="checkbox" name="cb1" id="cb1" disabled="true" />
</body>
CSS:
<style type="text/css">
#terms {
height: 100px;
overflow: auto;
}
body{
width:960px;
margin: 0 auto;
}
</style>
JS:
<script src="jquery-1.8.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#terms').scroll(function() {
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
$("#cb1").removeAttr("disabled");
}
else {
$("#cb1").attr("disabled", "true");
}
});
});//]]>
</script>