简介
@barebone/utility-offset-before 是一款用于计算元素相对于其偏移父元素的位置的 npm 包。在前端开发的过程中，我们时常需要使用元素相对于其偏移父元素位置的信息。
这个包可以帮助我们快速地获取到元素的偏移值，减少我们的代码量。
安装
你可以直接使用 npm 安装 @barebone/utility-offset-before 包。打开终端，进入到你的项目目录下，然后运行以下命令。
npm install @barebone/utility-offset-before
示例代码
下面，是一个示例代码，在这个示例中，我们要计算元素 E1 相对于其偏移父元素 E2 的位置信息。
import offsetBefore from '@barebone/utility-offset-before';
const e1 = document.getElementById('e1');
const e2 = document.getElementById('e2');
const offset = offsetBefore(e1, e2);
console.log(offset);这个示例代码很简单，我们先获取到元素 E1 和偏移父元素 E2 的 DOM 对象，然后调用 offsetBefore 方法，并将两个 DOM 对象作为参数传入。了解了这个示例代码之后，我们来着重看看 offsetBefore 方法的使用和 API。
API
offsetBefore(element: HTMLElement, parent: HTMLElement): { x: number, y: number }
这是 @barebone/utility-offset-before 包的核心 API。offsetBefore 方法接收两个参数，分别是目标元素和偏移父元素。
这个方法的返回值是一个包含 x 和 y 两个属性的对象，表示目标元素的水平和垂直偏移量。其中，x 表示目标元素相对于其偏移父元素的水平偏移量，y 表示垂直偏移量。
使用
使用 @barebone/utility-offset-before 包很简单，我们只需要在项目中引入这个包，然后调用其提供的 API 就可以了。
接下来，我们看一下如何正确地使用这个 npm 包。
获取目标元素和偏移父元素
首先，我们需要获取到目标元素和偏移父元素。偏移父元素指的是目标元素相对于其偏移的第一个非 static 定位元素。
我们可以像上面那样，使用 document.getElementById 方法获取到目标元素和偏移父元素。
调用 offsetBefore 方法
之后，我们就可以使用 offsetBefore 方法获取到目标元素的偏移量了。直接将目标元素和偏移父元素作为参数传入，就可以返回一个包含 x 和 y 两个属性的对象了。
应用偏移量
当我们获取到偏移量后，我们就可以将其应用到页面中了。
结论
通过本文的介绍，我们已经学习了 @barebone/utility-offset-before 包的使用方法。这是一款简单易用的 npm 包，方便我们在前端开发的过程中获取到某个元素相对于其偏移父元素的位置信息。
希望这篇教程能够对你带来指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e081e8991b448d3bcd