CSS笔记分享

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

2016-11-08  本文已影响45人  微行丶简

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

offset()

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

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

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

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

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

修复方法

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;
}
上一篇 下一篇

猜你喜欢

热点阅读