做网页数据采集时经常会遇到懒加载的列表区域。通常我们都需要 将鼠标先定位到该区域上 才能确保滚动操作始终作用在该区域由此实现新数据的加载。但这里有一个问题并不是所有网页的懒加载区域都能很好地进行坐标定位。如果目标懒加载区域 恰好是整个页面唯一的滚动区域占据屏幕绝大部分空间 那么我们直接用 获取屏幕分辨率 “加” 滚动鼠标滚轮两条指令基本都能生效。但实际场景中还有些页面的懒加载区域并不在屏幕中央比如 多区域滚动、分栏页面、后台系统、嵌套滚动、小容器列表 等之前的方法就不能用了。这时候鼠标落错了地方滚动就作用到别的区域去了。所以必须获取目标元素坐标再滚动。问题来了 如何获取到网页任一元素在当前屏幕可视区域内的中心坐标位置使得后续滚动仅发生在该区域呢可能不少人第一个念头是用影刀的原生指令获取元素位置那么它在这个场景下确实能直接用吗并不能。该指令提供了基于 屏幕左上角 “和基于” 浏览器页面 左上角两种坐标系来得到坐标信息但它们 都是基于整个元素的中心无论元素是否在当前屏幕完整可见。这就会导致 你得到的坐标直接跑到屏幕外面去了或者位置压根不在元素的可见区域内。而我们要的是该区域可见部分的中心 只计算当前在屏幕内的那部分 。怎么解决呢直接上我实测后的JS脚本。function(element,input){varrectelement.getBoundingClientRect();varviewportHeightwindow.innerHeight||document.documentElement.clientHeight;varviewportWidthwindow.innerWidth||document.documentElement.clientWidth;// 用宽度计算实际缩放因子(不受工具栏影响)varscalewindow.outerWidth/window.innerWidth;// 计算元素在可视区域内的可见部分varvisibleTopMath.max(0,rect.top);varvisibleBottomMath.min(viewportHeight,rect.bottom);varvisibleLeftMath.max(0,rect.left);varvisibleRightMath.min(viewportWidth,rect.right);// 计算可见部分的宽高varvisibleWidthvisibleRight-visibleLeft;varvisibleHeightvisibleBottom-visibleTop;// 如果元素完全不可见,返回nullif(visibleWidth0||visibleHeight0){returnnull;}// 计算可见部分的中心坐标(相对于视口)varcenterXvisibleLeftvisibleWidth/2;varcenterYvisibleTopvisibleHeight/2;// 转换为屏幕坐标varbrowserXwindow.screenX||window.screenLeft;varbrowserYwindow.screenY||window.screenTop;// 工具栏高度 outerHeight - innerHeight × scalevartoolbarHeightwindow.outerHeight-window.innerHeight*scale;// 中心坐标从CSS像素转到物理像素varscreenXbrowserXcenterX*scale;varscreenYbrowserYtoolbarHeightcenterY*scale;return{x:Math.round(screenX),y:Math.round(screenY),visibleWidth:Math.round(visibleWidth),visibleHeight:Math.round(visibleHeight),toolbarHeight:Math.round(toolbarHeight)};}核心逻辑很简单 先拿元素的边界矩形再算出它在屏幕上的可见区域最后算可见区域的中心坐标 。这样算出来的坐标鼠标移过去正好落在元素的可见部分中心后面滚动懒加载正常触发。这个脚本经多次调整后 对浏览器缩放、系统缩放、分辨率调整全都免疫 不管你怎么折腾坐标都准确无误。-END-爱练字的ISTJ型互联网人/信息整合怪/工具人/影刀高级认证工程师。专注分享RPAAI自动化场景提效方案、效率软件安利、实用技能。“所有的生产要素都可以被构建只有认知是壁垒”欢迎関注 掌心向暖推荐阅读拒绝品牌碰瓷如何通过影刀RPA为品牌IP搭建一套高效的“内容合规治理”工作流那些拥有上千浏览器书签/收藏夹的电脑用户是怎么管理书签的不会编程的我开发了一款近900行指令的自动化RPA应用完美解决98以上复制受限的飞书文档飞书文档附件文件下载RPA方案2.0来了不仅是PDFWord、PPT、Excel、视频都能批量导出了还都是源文件 如何获取网页某个元素在屏幕可见部分的中心坐标影刀RPA懒加载坐标定位技巧
做网页数据采集时经常会遇到懒加载的列表区域。通常我们都需要 将鼠标先定位到该区域上 才能确保滚动操作始终作用在该区域由此实现新数据的加载。但这里有一个问题并不是所有网页的懒加载区域都能很好地进行坐标定位。如果目标懒加载区域 恰好是整个页面唯一的滚动区域占据屏幕绝大部分空间 那么我们直接用 获取屏幕分辨率 “加” 滚动鼠标滚轮两条指令基本都能生效。但实际场景中还有些页面的懒加载区域并不在屏幕中央比如 多区域滚动、分栏页面、后台系统、嵌套滚动、小容器列表 等之前的方法就不能用了。这时候鼠标落错了地方滚动就作用到别的区域去了。所以必须获取目标元素坐标再滚动。问题来了 如何获取到网页任一元素在当前屏幕可视区域内的中心坐标位置使得后续滚动仅发生在该区域呢可能不少人第一个念头是用影刀的原生指令获取元素位置那么它在这个场景下确实能直接用吗并不能。该指令提供了基于 屏幕左上角 “和基于” 浏览器页面 左上角两种坐标系来得到坐标信息但它们 都是基于整个元素的中心无论元素是否在当前屏幕完整可见。这就会导致 你得到的坐标直接跑到屏幕外面去了或者位置压根不在元素的可见区域内。而我们要的是该区域可见部分的中心 只计算当前在屏幕内的那部分 。怎么解决呢直接上我实测后的JS脚本。function(element,input){varrectelement.getBoundingClientRect();varviewportHeightwindow.innerHeight||document.documentElement.clientHeight;varviewportWidthwindow.innerWidth||document.documentElement.clientWidth;// 用宽度计算实际缩放因子(不受工具栏影响)varscalewindow.outerWidth/window.innerWidth;// 计算元素在可视区域内的可见部分varvisibleTopMath.max(0,rect.top);varvisibleBottomMath.min(viewportHeight,rect.bottom);varvisibleLeftMath.max(0,rect.left);varvisibleRightMath.min(viewportWidth,rect.right);// 计算可见部分的宽高varvisibleWidthvisibleRight-visibleLeft;varvisibleHeightvisibleBottom-visibleTop;// 如果元素完全不可见,返回nullif(visibleWidth0||visibleHeight0){returnnull;}// 计算可见部分的中心坐标(相对于视口)varcenterXvisibleLeftvisibleWidth/2;varcenterYvisibleTopvisibleHeight/2;// 转换为屏幕坐标varbrowserXwindow.screenX||window.screenLeft;varbrowserYwindow.screenY||window.screenTop;// 工具栏高度 outerHeight - innerHeight × scalevartoolbarHeightwindow.outerHeight-window.innerHeight*scale;// 中心坐标从CSS像素转到物理像素varscreenXbrowserXcenterX*scale;varscreenYbrowserYtoolbarHeightcenterY*scale;return{x:Math.round(screenX),y:Math.round(screenY),visibleWidth:Math.round(visibleWidth),visibleHeight:Math.round(visibleHeight),toolbarHeight:Math.round(toolbarHeight)};}核心逻辑很简单 先拿元素的边界矩形再算出它在屏幕上的可见区域最后算可见区域的中心坐标 。这样算出来的坐标鼠标移过去正好落在元素的可见部分中心后面滚动懒加载正常触发。这个脚本经多次调整后 对浏览器缩放、系统缩放、分辨率调整全都免疫 不管你怎么折腾坐标都准确无误。-END-爱练字的ISTJ型互联网人/信息整合怪/工具人/影刀高级认证工程师。专注分享RPAAI自动化场景提效方案、效率软件安利、实用技能。“所有的生产要素都可以被构建只有认知是壁垒”欢迎関注 掌心向暖推荐阅读拒绝品牌碰瓷如何通过影刀RPA为品牌IP搭建一套高效的“内容合规治理”工作流那些拥有上千浏览器书签/收藏夹的电脑用户是怎么管理书签的不会编程的我开发了一款近900行指令的自动化RPA应用完美解决98以上复制受限的飞书文档飞书文档附件文件下载RPA方案2.0来了不仅是PDFWord、PPT、Excel、视频都能批量导出了还都是源文件