那些年我在“元素距离浏览器窗口的距离"踩的坑

前言：元素距离视口的距离似乎是老生常谈了，网上一搜一大把，平时没有用到也没在意，今天用到才踩了坑。

解决方案放在最前面：

image

一、简单介绍一下常用API

image

clientWidth,clientHeight：内容区域的宽高，padding＋content的宽高，不包括边框宽度值。

offsetLeft,offsetTop：相对于最近的祖先定位元素。

offsetWidth,offsetHeight：整个元素的尺寸（border＋padding＋content）

scrollWidth,scrollHeight：整个内容区域的宽度，滚动区域内部元素的宽高＋滚动区域自身的padding

scrollLeft,scrollTop：元素滚动的大小

二、常见误区

想要获取元素距离窗口顶部的距离经常会看到下面这样的代码

let container = document.getElementById('container') // 获取元素
let top = container.offsetTop - body.scrollTop // 用元素与body之间的距离 - body 滚动的距离复制代码

这个方法看似可行，但其实offsetTop 是相对于最近的祖先定位元素，假如container 的父元素有ponsition，那么获取到的就不是距离body的距离了。计算结果错误。

三、解决方案介绍

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

image

可以看到该方法返回如下几个值

top：元素与视口上部的距离

left：元素与视口左部的距离

right：元素与视口右部的距离

bottom：元素与视口下部的距离

width、height：元素的宽高

image

可以看到当页面滚动时，相应的数值也会发生变化。

成果：

这样图中container 距离视口左边与上边距离未知时，也有办法获取正确的距离，从而计算节点正确的生成位置啦！

参考资料：

developer.mozilla.org/zh-CN/docs/…

个人介绍：

我只是一个在内卷中苦苦挣扎的大专生——天铭，希望和大家共同努力，只要我们足够努力，我们的老板就能早日过上自己想要的日子！