使用这个方法后会返回一个对象
例子:

如果我们想要知道左上方粉色正方形相对于浏览器窗口的位置就可以使用这个方法
上代码:

注意:因为react代码执行顺序的关系,我在这里用了setTimeOut方法才能获取到他的值,不然会是undefined
结果:

注意:
使用 getBoundingClientRect() 获取的是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)
举个例子:

此时结果:

如果我把页面网上移动一段距离,只露出两个蓝色正方形:
top: 1000

此时结果:
top: 600

网友评论