我在下面有一个示例,其中有一个条款 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>