快速获取dom到body左侧和顶部的距离,简单粗暴无bug-getBoundingClientRect

获取dom到body左侧和顶部的距离-getBoundingClientRect

平时在写js的时候,偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查,有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次,算出来了一堆错误答案。

下面我要分享的这个方法,兼容性很好(ie4都ok),而且很方便,不会算错。

这个方法就是 getBoundingClientRect。

1.getBoundingClientRect方法简介

getBoundingClientRect 返回的是一个 DOMRect 对象,是一组矩形集合,我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。
使用方法如下:

let domToTop = dom.getBoundingClientRect().top  // dom 的顶边到视口顶部的距离
let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离
let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离
let domToRight = dom.getBoundingClientRect().right // dom 的右边到视口左边的距离

注意事项:

  1. 得到的值是相对于视口而言的,即如果页面的滚动位置发生变化,那么得到的top、left也会发生变化;如果需要计算到body边框的距离,需要再加上网页滚动条的长度。下面会给出完整例子。
  2. 这个方法返回的四个值都是相对于当前视口的左上角而言的。即top和bottom是dom的顶边和底边到视口的顶部的距离,同理left和right是相对于视口左边的距离。

兼容性

属性 chrome Edge Firefox IE Opera Safari
基础属性:left、top、right、bottom Yes 12 3 4 Yes 6
height、width Yes Yes 3.5 9 Yes Yes
x、y Yes No Yes No Yes No

2.计算到body左侧和顶部的距离

因为 getBoundingClientRect 可以获取到视口边界的距离,所以得到的值加上滚动条的长度,就可以得到距离body边界的距离。

demo预览链接,方便大家查验效果 预览链接

github地址

实际使用时,直接使用 getScrollPosition 和 getDomToViewPosition这两个方法就好,其余的方法只是为了更好地展现。帮到你的话,点个赞呗~

下面是完整代码:




    
    Title
    


展示板:距离body的边框距离 = 视口距离 + 滚动条长度
距离视口左侧距离:
距离视口顶部距离:
滚动条水平方向的长度:
滚动条垂直方向的长度:
距离body左侧距离:
距离body顶部距离:

你可能感兴趣的:(javascript,css)