企业官网建设流程全解析

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

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

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

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

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

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

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

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

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

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

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

function(element,input){varrect=element.getBoundingClientRect();varviewportHeight=window.innerHeight||document.documentElement.clientHeight;varviewportWidth=window.innerWidth||document.documentElement.clientWidth;// 用宽度计算实际缩放因子(不受工具栏影响)varscale=window.outerWidth/window.innerWidth;// 计算元素在可视区域内的可见部分varvisibleTop=Math.max(0,rect.top);varvisibleBottom=Math.min(viewportHeight,rect.bottom);varvisibleLeft=Math.max(0,rect.left);varvisibleRight=Math.min(viewportWidth,rect.right);// 计算可见部分的宽高varvisibleWidth=visibleRight-visibleLeft;varvisibleHeight=visibleBottom-visibleTop;// 如果元素完全不可见,返回nullif(visibleWidth<=0||visibleHeight<=0){returnnull;}// 计算可见部分的中心坐标(相对于视口)varcenterX=visibleLeft+visibleWidth/2;varcenterY=visibleTop+visibleHeight/2;// 转换为屏幕坐标varbrowserX=window.screenX||window.screenLeft;varbrowserY=window.screenY||window.screenTop;// 工具栏高度 = outerHeight - innerHeight × scalevartoolbarHeight=window.outerHeight-window.innerHeight*scale;// 中心坐标从CSS像素转到物理像素varscreenX=browserX+centerX*scale;varscreenY=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、视频都能批量导出了，还都是源文件