`

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

javascriptoffsetjquery offset浏览器兼容 
阅读更多

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

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

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

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

  • 一种依然为“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()；

另一种通用方法：

function pageX(elem) 
{
	return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}
	
function pageY(elem) 
{
        return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}

 

 

分享到：
| 深入理解js闭包
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics