JS：获取元素的可见区域坐标

我需要一个函数，可以计算当前在屏幕上可见的元素的可见区域，而无需隐藏部分overflow: scroll, position: absolute etc.

也就是这个函数的结果getVisiblePart(el)将Visible Rect is: {x: 10, y: 20, height: 50, width: 700}

问题背景：需要这样的函数是由于 W3C 规范中与 webdriver 一起使用的一个特性：https://w3c.github.io/webdriver/webdriver-spec.html#element-interactability https://w3c.github.io/webdriver/webdriver-spec.html#element-interactability

元素的视图内中心点是视口内第一个 DOM 客户端矩形区域的中心点。

用于 e2e 测试的 selenoid/selenide 等框架使用 w3c 原理来计算可见元素的中心将光标移动到它 https://selenide.org/2019/12/12/advent-calendar-actions/，同时允许您指定偏移量。主要问题是找出元素此刻可见区域的实际大小，以便计算正确的偏移量，例如计算左上边框。

对于硒化物/硒化物，该问题的解决方案是：

Selenide.actions().moveToElement(el, getVisiblePart(el).width / -2, getVisiblePart(el).height / -2)

我读过很多类似的主题，例如：

• 如何判断 DOM 元素在当前视口中是否可见？ https://stackoverflow.com/q/123999/2051938（它只回答该元素是否已被看到的问题）
• 如何检查元素滚动后是否可见？ https://stackoverflow.com/q/487073/2051938 (same)
• 是否可以通过编程方式确定是否使用 W3C 操作命令？ https://stackoverflow.com/q/51974620/2051938（关闭但没有有效的答案）

所有答案要么给出元素是否可见的布尔值，要么没有考虑到元素可能部分隐藏overflow: scroll

带卷轴的真实示例（我需要找到可见的blue任意滚动位置的矩形位置）：

.a {
  height: 250px;
  overflow: scroll;
  padding-top: 100px;
  background: yellow;
}
.b {
  height: 500px;
  overflow: scroll;
}
.c {
  height: 1000px;
  background: blue;
}
#target {
  border: 2px dashed red;
  position: absolute;
  pointer-events: none;
  transform: translate(-1px,-1px); /*because of border*/
}

<div class="a">
  <div class="b">
    <div class="c" />
  </div>
</div>
<div id="target" />

在回答这个问题时，我已经部分解决了这个问题，达到了我需要的结果路口观察器 API https://developer.mozilla.org/en/docs/Web/API/Intersection_Observer_API，但我不认为这个解决方案很好，至少因为它与函数调用时间不同步以及跨浏览器兼容性问题。

我的解决方法基于路口观察器 API https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API.

我不认为这个解决方案很好，至少因为它与调用函数时不同步以及在跨浏览器兼容性问题上。

这个例子完美地展示了我想要得到的最终版本。

var options = {
    // root: document.querySelector('#scrollArea'),
    // rootMargin: '0px',
    threshold: 1
}
var callback = function(entries, observer) {
    const r = entries[0].intersectionRect;
    document.getElementById('target').setAttribute('style', `top: ${r.top}px;left: ${r.left}px;height: ${r.height}px;width: ${r.width}px;`);
    observer.unobserve(c);
};

const c = document.querySelector('.c');
setInterval(() => {
  var observer = new IntersectionObserver(callback, options);
  observer.observe(c);
}, 200);

.a {
  height: 250px;
  overflow: scroll;
  padding-top: 100px;
  background: yellow;
}
.b {
  height: 500px;
  overflow: scroll;
}
.c {
  height: 1000px;
  background: blue;
}
#target {
  border: 2px dashed red;
  position: absolute;
  pointer-events: none;
  transform: translate(-1px,-1px); /*because of border*/
}

<div class="a">
  <div class="b">
    <div class="c" />
  </div>
</div>
<div id="target" />

说明：每200ms我们计算一次蓝色元素的可见面积并突出显示它。

我如何使用它的一个例子Selenide:

    val containerSelector = "div.testEl"
    val rect = executeAsyncJavaScript<String>(
        "var callback = arguments[arguments.length - 1];" +
                "var el = document.querySelector('" + containerSelector + "');" +
                "new IntersectionObserver(" +
                "    (entries, observer) => {" +
                "        observer.unobserve(el);" +
                "        var r = entries[0].intersectionRect;" +
                "        callback([r.x, r.y, r.height, r.width].map(v => Math.ceil(v)).join(','));" +
                "    }," +
                "    { threshold: 1 }" +
                ").observe(el);"
    )!!.split(',').toTypedArray();

    LEFT_TOP_X = rect[3].toInt() / -2 + 1 // +1 for Float tolerance
    LEFT_TOP_Y = rect[2].toInt() / -2 + 1 // +1 for Float tolerance

    // Move cursor to TOP LEFT
    Selenide.actions().moveToElement(el, LEFT_TOP_X, LEFT_TOP_Y)