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

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

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

掌心向暖RPA自动化

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

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

掌心向暖RPA自动化

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

掌心向暖RPA自动化

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

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

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

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

掌心向暖RPA自动化

掌心向暖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;

 掌心向暖RPA自动化

    // 如果元素完全不可见,返回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)

    };

}

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

掌心向暖RPA自动化

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

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