React中的getBoundingClientRect

最新推荐文章于 2024-06-06 17:32:34 发布

weixin_34041003

最新推荐文章于 2024-06-06 17:32:34 发布

阅读量2k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cc2cadfe51d456e2f77f15c

版权

getBoundingClientRect一词最先来源于IE，是IE的私有属性，现在已经是一个W3C标准。是的，意思就是说原生js中同样有一个getBoundingClientRect。和react中的一样？准确来说，react中用到的就是原生js中的getBoundingClientRect。

因为你如果想在react中使用getBoundingClientRect，就必须先获取到react中的元素的ref，然后ReactDOM.findDOMNode(ref).getBoundingClientRect，ReactDOM当然是需要引入。

ReactDOM.findDOMNode(ref)，就相当于js当中的document.getElementById之类的，它返回的是DOM，所以才可以使用getBoundingClientRect。

如果说getBoundingClientRect是react的内置方法，那么就可以直接通过ref.getBoundingClientRect来使用了，但是显然不可以的。

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

这里的top、left和css中的理解很相似，width、height是元素自身的宽高;

但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

getBoundingClientRect方法常用在需要重新定位的场景，比如说用户引导。在这种需求的时候，不要忘了考虑document.body.scrollTop，有些浏览器是document.documentElement.scrollTop

document.body.scrollTop+document.documentElement.scrollTop;

这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。

另外，最好不要使用rem这个单位，因为这个单位在元素的实际加载当中会根据屏幕大小进行一定比例的缩放，但是很多例如getBoundingClientRect此类的方法，返回的都是像素值，这个时候如果你要拿这些值来转化成rem会比较蛋疼。总之rem并不是真实的像素。

转载于:https://juejin.im/post/5cc2cadfe51d456e2f77f15c

关注