I have an example below which has a terms div which has some terms and conditions as content. When the user scroll the div to bottom, then the checkbox is enabled. This is only not working only in IE 7 with IE 7/8/9 standards (I am changing the standard options from Developer window).
Following is my html, css and 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>
The problem was with the extra padding given to the div which was set to overflow as scroll. Due to the padding defined for it, the condition defined in script tag above was not met in IE.