注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

firefox 、IE下$("body").scrollTop()的兼容问题  

2014-09-30 11:00:23|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

梦幻雪冰欢迎学习交流----梦幻雪冰

在接触jQuery的时候,可以体会到jQuery已经把兼容问题封装的很好了,但是有时候还是会遇到一些兼容问题。那来看看今天介绍的一个兼容问题,希望对大家有所帮助~  
【1】$("body").scrollTop()在各个浏览器获取值

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script src="jquery-1.8.3.min.js"></script>
<style>
html,body {
height: 100%;
}
.wrap {
height: 1000px;
background: #ddd;
}
</style>
</head>
<body>
<div class="wrap">
梦幻雪冰
</div>
</body>
<script>
$(window).scroll(function(){
alert($("body").scrollTop());
})
</script>

</html>

【结果】除了谷歌浏览器之外其它浏览器获取的值都是0(对于本机电脑中所有浏览器来说)
火狐下:
firefox、IE下(body).scrollTop()的兼容问题 - 梦幻雪冰 - 梦幻雪冰
 谷歌下:
firefox、IE下(body).scrollTop()的兼容问题 - 梦幻雪冰 - 梦幻雪冰
IE下:
firefox、IE下(body).scrollTop()的兼容问题 - 梦幻雪冰 - 梦幻雪冰

 【2】如何兼容各个浏览器呢?,首先要进行判断运行的是谷歌浏览器还是其它浏览器。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script src="jquery-1.8.3.min.js"></script>
<style>
html,body {
height: 100%;
}
.wrap {
height: 1000px;
background: #ddd;
}
</style>
</head>
<body>
<div class="wrap">
梦幻雪冰
</div>
</body>
<script>
if(document.body.scrollTop){
alert("我是谷歌浏览器")
}
else{
alert("我是非谷歌浏览器");
}
</script>

</html>

【结果】欢迎学习交流----梦幻雪冰
火狐下:
firefox、IE下(body).scrollTop()的兼容问题 - 梦幻雪冰 - 梦幻雪冰
 谷歌下:
firefox、IE下(body).scrollTop()的兼容问题 - 梦幻雪冰 - 梦幻雪冰
 IE下:
firefox、IE下(body).scrollTop()的兼容问题 - 梦幻雪冰 - 梦幻雪冰

 【3】现在可以判断运行的是谷歌浏览器还是别的浏览器,那么可以来解决$("body").scrollTop()兼容问题

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script src="jquery-1.8.3.min.js"></script>
<style>
html,body {
height: 100%;
}
.wrap {
height: 1000px;
background: #ddd;
}
</style>
</head>
<body>
<div class="wrap">
梦幻雪冰
</div>
</body>
<script>
if(document.body.scrollTop){
// 谷歌浏览器支持
$(window).scroll(function(){
alert($("body").scrollTop());
})
}
else{
// 非谷歌浏览器支持
$(window).scroll(function(){
alert($(window).scrollTop());
})
}  


// 或者$("html, body").scrollTop(); 这样兼容比较简洁
</script>

</html>

【结果】欢迎学习交流----梦幻雪冰
火狐下:
firefox、IE下(body).scrollTop()的兼容问题 - 梦幻雪冰 - 梦幻雪冰
 谷歌下:
firefox、IE下(body).scrollTop()的兼容问题 - 梦幻雪冰 - 梦幻雪冰
 IE下:
firefox、IE下(body).scrollTop()的兼容问题 - 梦幻雪冰 - 梦幻雪冰
 欢迎学习交流----梦幻雪冰
  评论这张
 
阅读(194)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017