在前端开发中，我们经常需要定位元素或者计算元素的位置，而 @vivaxy/here 这个 npm 包可以帮助我们快速方便地完成这些操作。
安装与使用
首先，我们需要通过 npm 安装该包：
--- ------- ------------ ------
接下来，在你的 JavaScript 代码中引入该包：
------ ---- ---- ---------------
然后，你就可以使用该包提供的函数来定位元素或者计算元素的位置了。
定位元素
@vivaxy/here 提供了两个函数来帮助我们定位元素：getBoundingClientRect() 和 getScroll()。
getBoundingClientRect()
getBoundingClientRect() 函数是常用的一个函数，它返回一个 DOM 元素的大小及其相对于视窗的位置。该函数没有任何参数，使用方法如下：
----- ------- - ----------------------------------- ----- ---- - ------------------------------------ ------------------
这里，我们通过 document.getElementById() 获取一个 DOM 元素，并将该元素传入 getBoundingClientRect() 函数中。最终，我们将输出类似下面的内容：
- ------ -- -------- ---- --------- ---- ------- -- -------- ---- --------- --- -
getScroll()
getScroll() 函数可以返回当前页面的滚动位移（scroll position）。在某些情况下，我们需要知道滚动条的位置，例如：响应用户滚动事件以实现某些功能。这时，我们可以使用该函数。使用方法如下：
----- --------- - ----------------- -----------------------
最终输出的内容中，包含了当前页面的滚动位置信息，类似下面的内容：
- ---- -- ---- --- -
这里 x 是水平方向的滚动距离，y 是垂直方向的滚动距离。
计算元素位置
有时候，我们需要计算 DOM 元素的真实位置，例如：我们希望实现一个在某个元素顶部或者底部弹出框的功能。此时，我们可以使用 @vivaxy/here 提供的 getBoundingClientRectWithScroll() 函数来计算元素的位置。
该函数接受两个参数：第一个参数是一个 DOM 元素，第二个参数是一个布尔值，用于指定在计算元素位置时是否考虑页面滚动条的位移。使用方法如下：
----- ------- - ----------------------------------- ----- -------------- - --------------------------------------------- ------ ----------------------------
这里我们将第二个参数设置为 true，表示在计算元素位置时会考虑页面滚动条的位移，从而得到元素的真实位置。最终输出的结果类似下面的内容：
- ------ ---- -------- ---- --------- ---- ------- ---- -------- ---- --------- --- -
示例代码
最后，我们来看一个完整的示例代码，在这个示例代码中，我们通过 getBoundingClientRect() 函数获取一个元素的位置，然后将该元素的位置通过 getScroll() 函数获取的页面滚动位移相加，得到该元素的真实位置，最终将位置信息输出到控制台上。
--------- -----
----- ----------
------
----- --------------- --
------------------- ------------
-------
------
---- ------------ ---------------- --------- ---- ----- ----- ----- ------ ------ ------- ------ ----------------- -------------
------- --------------
------ ---- ---- ---------------
----- ------- - -----------------------------------
----- ---- - ------------------------------------
----- ------ - -----------------
----- -------------- - -
---- -------- - ---------
------ ---------- - ---------
------- ----------- - ---------
----- --------- - ---------
------ -----------
------- -----------
--
----------------------------
---------
-------
-------在这个代码中，我们使用 getElementById() 函数获取一个 id 为 example 的元素，并给该元素设置了一些样式（红色背景色、100x100 尺寸、距离左上角10px 的位置）。接下来，我们使用 getBoundingClientRect() 函数获取元素的位置信息，然后使用 getScroll() 函数获取页面滚动的位置信息。最后，我们将页面滚动位置与元素位置相加，得到元素的真实位置，再将该位置信息输出到控制台上。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067357890c4f7277583d9a