图解浏览器的各种距离

网页开发中，我们经常要计算各种距离。比如 OnBoarding 组件，我们要拿到每一步的高亮元素的位置、宽高：比如 Popover 组件，需要拿到每个元素的位置，然后确定浮层位置：比如滚动到页面底部，触发列表的加载，这需要拿到滚动的距离和页面的高度。类似这样，需要计算距离、宽高等的场景有很多。而浏览器里与距离、宽高有关的属性也有不少。今天我们来整体过一遍。首先，页面一般都是超过一屏的，右边会出现滚动条，代表当前可视区域的位置：这里窗口的部分是可视区域，也叫做视口 viewport。如果我们点击了可视区域内的一个元素，如何拿到位置信息呢？我们只看 y 轴方向好了，x 轴也是一样的。事件对象可以拿到 pageY、clientY、offsetY，分别代表到点击的位置到文档顶部，到可视区域顶部，到触发事件的元素顶部的距离。还有个 screenY，是 ………………………………