使用 JavaScript 检查两个元素是否重叠

作者

使用 JavaScript 检查两个元素是否重叠

Check if two Elements overlap using JavaScript

要检查两个元素是否重叠，请使用该getBoundingClientRect()方法获取一个对象，该对象包含有关元素与视口的相对位置的信息。然后，比较两个矩形的边界边缘（上、右、下、左）。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box1" style="width: 100px; height: 100px; background-color: salmon; position:absolute;">
      Box 1
    </span>

    <div id="box2" style="width: 100px; height: 100px; background-color: lime">
      Box 2
    </span>

    <div id="box3" style="width: 100px; height:100px; background-color: plum; margin-top: 150px;">
      Box 3
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
function elementsOverlap(el1, el2) {
  const domRect1 = el1.getBoundingClientRect();
  const domRect2 = el2.getBoundingClientRect();

  return !(
    domRect1.top > domRect2.bottom ||
    domRect1.right < domRect2.left ||
    domRect1.bottom < domRect2.top ||
    domRect1.left > domRect2.right
  );
}

const el1 = document.getElementById('box1');
const el2 = document.getElementById('box2');
const el3 = document.getElementById('box3');

console.log(elementsOverlap(el1, el2)); // 👉️ true

console.log(elementsOverlap(el1, el3)); // 👉️ false

我们创建了一个可重用函数来检查两个元素是否重叠并返回布尔结果：

  • true如果元素重叠。
  • false如果他们不这样做。

我们使用
getBoundingClientRect
方法获取一个对象，该对象包含有关元素相对于视口的位置的信息。

、top和属性描述元素right相对于视口左上角的位置bottom。 left

请注意，当滚动位置更改时，矩形的边界边（、top和）会更改它们的值，因为它们的值是相对于视口的。rightbottomleft

如果满足括号中的所有条件，则元素不会重叠，函数返回false。

另一方面，如果所有条件都返回false，则元素重叠。

elementsOverlap当我们使用 idbox1
和的元素调用该函数时box2，该函数返回true，因为第一个元素的位置设置为absolute并与第二个元素重叠。

当我们用第一个和第三个元素调用函数时，它返回
了，false因为第三个元素有一个margin-topof150px并且不与第一个元素重叠。

–

发表评论