offsetLeft:  获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:  获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

通俗点说，offsetLeft和offsetTop求得是该元素距离其父元素的距离，而不是真正意义上距离浏览器的距离，因此需要使用以下代码进行求解：

   var top = this.offsetTop;
   var left = this.offsetLeft;
   while(this = this.offsetParent){
      top+=this.offsetTop;
      left+=this.offsetLeft;
   }

其中this代表的是当前元素，通过while循环，一级一级的求出距离父元素的距离，则最后的结果就是该元素距离浏览器真实的距离。

不过最后由于浏览器存在滚动条，可能导致距离不准确，因此需要减去滚动条滚动的距离。

   top-=document.body.scrollTop;
   left-=document.body.scrollLeft;

最后得到的top和left就是该元素距离浏览器可视区域的真实距离。
 
 

赏

微信扫一扫，打赏作者吧～