美文网首页
在React中使用 getBoundingClientRect(

在React中使用 getBoundingClientRect(

作者: 再见地平线_e930 | 来源:发表于2020-07-20 21:29 被阅读0次

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

例子:

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

上代码:

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

结果:

注意:

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

举个例子:

此时结果:

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

top: 1000

注意看滚动条

此时结果:

top: 600

相关文章

网友评论

      本文标题:在React中使用 getBoundingClientRect(

      本文链接:https://www.haomeiwen.com/subject/pnsykktx.html