做网页数据采集时，经常会遇到懒加载的列表区域。
通常我们都需要将鼠标先定位到该区域上，才能确保滚动操作始终作用在该区域，由此实现新数据的加载。
但这里有一个问题，并不是所有网页的懒加载区域，都能很好地进行坐标定位。
如果目标懒加载区域恰好是整个页面唯一的滚动区域，占据屏幕绝大部分空间，那么我们直接用"获取屏幕分辨率"加"滚动鼠标滚轮"两条指令，基本都能生效。
但实际场景中，还有些页面的懒加载区域并不在屏幕中央，比如多区域滚动、分栏页面、后台系统、嵌套滚动、小容器列表等，之前的方法就不能用了。
这时候鼠标落错了地方，滚动就作用到别的区域去了。所以，必须获取目标元素坐标再滚动。
问题来了，如何获取到网页任一元素在当前屏幕可视区域内的中心坐标位置，使得后续滚动仅发生在该区域呢？
可能不少人第一个念头是用影刀的原生指令获取元素位置，那么它在这个场景下确实能直接用吗？
并不能。该指令提供了基于"屏幕左上角"和基于"浏览器页面"左上角两种坐标系来得到坐标信息，但它们都是基于整个元素的中心，无论元素是否在当前屏幕完整可见。
这就会导致，你得到的坐标直接跑到屏幕外面去了，或者位置压根不在元素的可见区域内。
而我们要的是该区域可见部分的中心，只计算当前在屏幕内的那部分。怎么解决呢？直接上我实测后的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)
};
}
核心逻辑很简单，先拿元素的边界矩形，再算出它在屏幕上的可见区域，最后算可见区域的中心坐标。
这样算出来的坐标，鼠标移过去，正好落在元素的可见部分中心，后面滚动懒加载正常触发。
这个脚本经多次调整后，对浏览器缩放、系统缩放、分辨率调整全都免疫，不管你怎么折腾，坐标都准确无误。
-END-
- 爱练字的ISTJ型互联网人/信息整合怪/工具人/影刀高级认证工程师。
- 专注分享：RPA&AI自动化场景提效方案、效率软件安利、实用技能。"所有的生产要素都可以被构建，只有认知是壁垒"，欢迎関注 @掌心向暖
推荐阅读：
- 拒绝品牌碰瓷！如何通过影刀RPA为品牌IP搭建一套高效的“内容合规治理”工作流？
- 那些拥有上千浏览器书签/收藏夹的电脑用户，是怎么管理书签的？
- 不会编程的我开发了一款近900行指令的自动化RPA应用，完美解决98％以上复制受限的飞书文档！！
- 飞书文档附件文件下载RPA方案2.0来了！不仅是PDF，Word、PPT、Excel、视频都能批量导出了，还都是源文件