如何获取网页某个元素在「屏幕可见部分」的中心坐标？| 影刀RPA懒加载坐标定位技巧

做网页数据采集时，经常会遇到懒加载的列表区域。

通常我们都需要将鼠标先定位到该区域上，才能确保滚动操作始终作用在该区域，由此实现新数据的加载。

但这里有一个问题，并不是所有网页的懒加载区域，都能很好地进行坐标定位。

如果目标懒加载区域恰好是整个页面唯一的滚动区域，占据屏幕绝大部分空间，那么我们直接用"获取屏幕分辨率"加"滚动鼠标滚轮"两条指令，基本都能生效。

但实际场景中，还有些页面的懒加载区域并不在屏幕中央，比如多区域滚动、分栏页面、后台系统、嵌套滚动、小容器列表等，之前的方法就不能用了。

这时候鼠标落错了地方，滚动就作用到别的区域去了。所以，必须获取目标元素坐标再滚动。

问题来了，如何获取到网页任一元素在当前屏幕可视区域内的中心坐标位置，使得后续滚动仅发生在该区域呢？

可能不少人第一个念头是用影刀的原生指令获取元素位置，那么它在这个场景下确实能直接用吗？

并不能。该指令提供了基于"屏幕左上角"和基于"浏览器页面"左上角两种坐标系来得到坐标信息，但它们都是基于整个元素的中心，无论元素是否在当前屏幕完整可见。

这就会导致，你得到的坐标直接跑到屏幕外面去了，或者位置压根不在元素的可见区域内。

而我们要的是该区域可见部分的中心，只计算当前在屏幕内的那部分。怎么解决呢？直接上我实测后的JS脚本。

function (element,
input) {
    var rect =
element.getBoundingClientRect();
    var viewportHeight
= window.innerHeight || document.documentElement.clientHeight;
    var viewportWidth
= window.innerWidth || document.documentElement.clientWidth;
 
    // 用宽度计算实际缩放因子(不受工具栏影响)
    var scale
= window.outerWidth / window.innerWidth;
 
    // 计算元素在可视区域内的可见部分
    var visibleTop
= Math.max(0, rect.top);
    var visibleBottom
= Math.min(viewportHeight, rect.bottom);
    var visibleLeft
= Math.max(0, rect.left);
    var visibleRight
= Math.min(viewportWidth, rect.right);
 
    // 计算可见部分的宽高
    var visibleWidth
= visibleRight - visibleLeft;
    var visibleHeight
= visibleBottom - visibleTop;
 
    // 如果元素完全不可见,返回null
    if (visibleWidth
<= 0 || visibleHeight <= 0) {
        return null;
    }
 
    // 计算可见部分的中心坐标(相对于视口)
    var centerX
= visibleLeft + visibleWidth / 2;
    var centerY
= visibleTop + visibleHeight / 2;
 
    // 转换为屏幕坐标
    var browserX
= window.screenX || window.screenLeft;
    var browserY
= window.screenY || window.screenTop;
 
    // 工具栏高度 = outerHeight -
innerHeight × scale
    var toolbarHeight
= window.outerHeight - window.innerHeight *
scale;
 
    // 中心坐标从CSS像素转到物理像素
    var screenX
= browserX + centerX * scale;
    var screenY
= browserY + toolbarHeight + centerY * scale;
 
    return {
        x: Math.round(screenX),
        y: Math.round(screenY),
        visibleWidth: Math.round(visibleWidth),
        visibleHeight: Math.round(visibleHeight),
        toolbarHeight: Math.round(toolbarHeight)
    };
}

核心逻辑很简单，先拿元素的边界矩形，再算出它在屏幕上的可见区域，最后算可见区域的中心坐标。

这样算出来的坐标，鼠标移过去，正好落在元素的可见部分中心，后面滚动懒加载正常触发。

这个脚本经多次调整后，对浏览器缩放、系统缩放、分辨率调整全都免疫，不管你怎么折腾，坐标都准确无误。