当前位置: 代码迷 >> Web前端 >> 关于不同浏览器对$(obj).offset()取值不一致的解决办法
  详细解决方案

关于不同浏览器对$(obj).offset()取值不一致的解决办法

热度:912   发布时间:2012-12-28 10:29:05.0
关于不同浏览器对$(obj).offset()取值不一致的解决方法

在测试中发现,JQuery中的$(obj).offset().top 在不同浏览器中获取的高度不同

此处以<body>中的一个<div id="content"></div>为例

  • 正常情况下,$("#content") 距离页面顶部的距离应该为0,页面初始化后,所有浏览器中的 $("#content" ).offset().top 的值都为0。

  • 但是如果将页面向下滚动一段距离后,不同的浏览器之间则会出现两种情况:

    • 一种依然为“0”,即距页面顶端距离。( 如 IE10,Firefox17)

    • 另一种则为“-$("html,body").scrollTop()”,即距可视窗口顶端距离。如(Chrome23,IE7)        


所以当需要从任意位置平滑滚动到某一元素时,对 $(obj).offset() 的取值不一致会使滚动结果截然不同,因此可以根据以上结果做出判断,以确定是否需要在获取元素的offset后加上滚动条位置(“$("html,body").scrollTop()”)。
 
总结:
     获取元素距离页面顶端高度
  •  offset() 获取的是距页面顶端距离时: $("#content" ).offset().top;

  •  offset() 获取的是距窗口顶端距离时: $("#content" ).offset().top + $("html,body").scrollTop();

1楼liyafei3217分钟前
高薪聘请web前端工程师 地点:海淀牡丹园 邮箱:liyafei@weizoom.com
  相关解决方案