一个滚动条事件在不同浏览器下的问题
实现的功能是:
当滚动条触底的时候,alert一个信息
在Chrome下工作正常,
FF下异常(FF全部变黑),
IE下异常(还没触底就alert一次,紧接着滚动条自动触底又alert一次)
全部代码如下:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>div</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><script type="text/javascript">$(document).ready(function() {$('div').scroll(function(){ var nScrollHeight = $(this)[0].scrollHeight;; var nScrollTop = $(this)[0].scrollTop; var nDivHeight = $(this).innerHeight(); if(nScrollTop + nDivHeight >= nScrollHeight){ alert("aaa"); } }); });</script></head><body> <div style = 'OVERFLOW: auto; HEIGHT: 280px'> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> </div></body></html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>div</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><script type="text/javascript">$(document).ready(function() {$('div').scroll(function(){ var nScrollHeight = $(this)[0].scrollHeight;; var nScrollTop = $(this)[0].scrollTop; var nDivHeight = $(this).innerHeight(); if(nScrollTop + nDivHeight >= nScrollHeight){ //alert("aaa"); $('#a').html(function(){ return +this.innerHTML + 1; }) return false; } }); });</script></head><body><div id="a">0</div> <div style = 'OVERFLOW: auto; HEIGHT: 280px'> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p> </div></body></html>