$(dom).offset().top取值恒为0的问题

背景： 前些日子仿照「百度文库 - 发现文档」做了一个Demo，就是当List被点击时，弹出一个Dialog。Dialog的显示位置是随着触发按钮的位置变化而变化的。做完后的效果，经过测试，自己还是很满意的。然后...Coolpad手机发现了问题...当屏幕滑动后，Dialog的位置显示不正确（首屏是没问题的）。经过一番调试，发现问题出现jQuery.offset()这个方法。遂出现了这篇踩坑的文章。

offset（）

这是jQuery库提供的一个函数，用来设置或者返回当前元素相对于当前文档的偏移量。

【注意】
该函数只对可见元素有效，即 display:none 的元素是不可以的。

好了，关于offset方法就解药介绍到这里了。如果读到这里的您还意犹未尽，需要更详细的介绍的话。请点击这里，有详细的介绍。

坑

var bgTop = $('dialog-bg').offset().top;

$(dom).offset().top方法，在不同的浏览器中返回的值不同。

• 当文档刚加载完时，返回为0（这是正确的，在所有浏览器表现一致）

• 当滑动页面，不同浏览器返回值出现偏差

  • 一直显示0

  • 正常变化

修复方法

var bgTop = $('dialog-bg').offset().top;if( bgTop == 0 ){
  bgTop = $('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;
}

作者：微行丶简
链接：https://www.jianshu.com/p/97c67bcdcf2f