首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > 跨浏览器开发 >

一个滚动条事件在不同浏览器下的有关问题

2012-04-14 
一个滚动条事件在不同浏览器下的问题实现的功能是:当滚动条触底的时候,alert一个信息在Chrome下工作正常,F

一个滚动条事件在不同浏览器下的问题
实现的功能是:
当滚动条触底的时候,alert一个信息

在Chrome下工作正常,
FF下异常(FF全部变黑),
IE下异常(还没触底就alert一次,紧接着滚动条自动触底又alert一次)

全部代码如下:

HTML code
<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 code
<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> 

热点排行