影刀RPA 网页滚动控制滚动到底、滚动到元素、懒加载触发作者林焱什么情况用你用影刀RPA采集一个网页发现只拿到了前几条数据明明页面上有几十条你的网页有个加载更多按钮但需要滚动到底部才会出现有些图片显示空白因为它们是懒加载的——只有滚动到可视区域才加载网页滚动控制是网页自动化中经常被忽略但非常关键的技能。很多现代网页使用懒加载、无限滚动、虚拟列表等技术不主动滚动就无法获取完整数据。本文讲清楚怎么控制网页滚动、怎么触发懒加载、怎么在滚动过程中采集数据。怎么做一、影刀RPA中的滚动操作影刀RPA提供了【网页滚动】指令支持多种滚动方式方式1滚动到页面底部 【网页滚动】→ 滚动方式滚动到底部 方式2滚动到指定元素 【网页滚动】→ 滚动方式滚动到指定元素 → 目标元素//div[idtarget] 方式3滚动指定像素 【网页滚动】→ 滚动方式滚动指定距离 → 像素值500二、用JavaScript控制滚动在影刀的【执行JavaScript脚本】指令或Python代码块中可以更精确地控制滚动// 滚动到页面底部window.scrollTo(0,document.body.scrollHeight);// 滚动到页面顶部window.scrollTo(0,0);// 向下滚动500像素window.scrollBy(0,500);// 平滑滚动到底部[video(video-asK5OueY-1784737323110)(type-csdn)(url-https://live.csdn.net/v/embed/525000)(image-https://v-blog.csdnimg.cn/asset/23da3fe1f67a47106d725406cfde9a97/cover/Cover0.jpg)(title-拼多多店群自动化上架方案)]window.scrollTo({top:document.body.scrollHeight,behavior:smooth});// 滚动到指定元素document.getElementById(target).scrollIntoView();// 平滑滚动到指定元素document.getElementById(target).scrollIntoView({behavior:smooth});三、滚动到底部触发懒加载很多网页如微博、电商商品列表使用无限滚动需要不断滚动到底部才能加载更多数据importtimedefscroll_to_bottom(max_scrolls20,wait_time2): 持续滚动到底部直到没有新内容加载 max_scrolls: 最大滚动次数 wait_time: 每次滚动后等待秒数 last_height0foriinrange(max_scrolls):# 执行JavaScript滚动到底部# 在影刀中使用【执行JavaScript脚本】# window.scrollTo(0, document.body.scrollHeight)# 等待新内容加载time.sleep(wait_time)# 获取当前页面高度# current_height driver.execute_script(return document.body.scrollHeight)current_heightyd_var[page_height]# 假设通过JS获取# 如果高度没变化说明到底了ifcurrent_heightlast_height:print(f第{i1}次滚动页面高度未变化已到底部)breaklast_heightcurrent_heightprint(f第{i1}次滚动页面高度{current_height})returni1# 返回实际滚动次数四、渐进式滚动采集滚动和采集交替进行适合无限滚动页面importtimedefscroll_and_scrape(scrape_func,max_rounds50): 滚动采集交替进行 scrape_func: 每次滚动后的采集函数 max_rounds: 最大轮次 all_data[]seen_idsset()# 用于去重no_new_count0# 连续无新数据的次数forround_numinrange(max_rounds):# 1. 采集当前页面数据current_datascrape_func()# 2. 去重只保留新数据new_count0foritemincurrent_data:item_iditem.get(id,)ifitem_idanditem_idnotinseen_ids:seen_ids.add(item_id)all_data.append(item)new_count1print(f第{round_num1}轮本页{len(current_data)}条新增{new_count}条累计{len(all_data)}条)# 3. 如果连续3次没有新数据认为到底了ifnew_count0:no_new_count1ifno_new_count3:print(连续3次无新数据停止滚动)breakelse:no_new_count0# 4. 滚动到底部# driver.execute_script(window.scrollTo(0, document.body.scrollHeight))time.sleep(2)# 等待加载returnall_data五、滚动到指定元素有些场景需要滚动到页面上某个特定元素位置defscroll_to_element(selector):滚动到指定元素位置# 方法1用JavaScript的scrollIntoViewjs_codef var element document.querySelector({selector}); if (element) {{ element.scrollIntoView({{behavior: smooth, block: center}}); }} # 在影刀中执行这个JavaScript# 方法2先获取元素位置再滚动到该位置js_get_positionf var element document.querySelector({selector}); if (element) {{ var rect element.getBoundingClientRect(); return rect.top window.scrollY; }} return -1; # 获取位置后滚动# driver.execute_script(fwindow.scrollTo(0, {position} - 200))# 实际应用滚动到下一页按钮位置scroll_to_element(.pagination .next-page)time.sleep(1)# 等待滚动完成# 然后点击该按钮六、触发图片懒加载很多网页图片使用懒加载——只有进入可视区域才加载真实图片。采集图片URL时需要先滚动让图片加载deftrigger_lazy_images(max_scrolls30):触发所有懒加载图片importtimeforiinrange(max_scrolls):# 向下滚动一屏的距离# driver.execute_script(window.scrollBy(0, window.innerHeight))time.sleep(0.5)# 检查是否到底# at_bottom driver.execute_script(# return window.innerHeight window.scrollY document.body.scrollHeight - 10# )at_bottomyd_var[at_bottom]ifat_bottom:# 再滚一次确保到底time.sleep(0.5)break# 滚回顶部确保所有图片都触发过# driver.execute_script(window.scrollTo(0, 0))time.sleep(1)# 现在所有图片应该都加载了可以采集src# driver.execute_script(window.scrollTo(0, document.body.scrollHeight))defget_all_image_urls(selectorimg[data-src]):获取所有图片URL包括懒加载的js_codef var images document.querySelectorAll({selector}); var urls []; images.forEach(function(img) {{ // 懒加载图片通常把真实URL放在data-src属性 var src img.getAttribute(data-src) || img.getAttribute(src); if (src !src.startsWith(data:)) {{ urls.push(src); }} }}); return urls; # 执行JS获取URL列表# urls driver.execute_script(js_code)# return urls七、虚拟列表的滚动处理一些现代网页如飞书表格、Notion使用虚拟列表——DOM中只渲染可见区域的元素滚动时动态替换。这种场景需要特殊处理defscrape_virtual_list(get_visible_items_func,max_scrolls100): 采集虚拟列表数据 虚拟列表只渲染可见项需要滚动采集去重 all_data{}last_first_idNoneno_change_count0foriinrange(max_scrolls):# 1. 获取当前可见的数据项visible_itemsget_visible_items_func()# 2. 存入字典去重以id为keyforiteminvisible_items:item_iditem.get(id)ifitem_id:all_data[item_id]item# 3. 检查是否在原地不动current_first_idvisible_items[0].get(id)ifvisible_itemselseNoneifcurrent_first_idlast_first_id:no_change_count1ifno_change_count3:breakelse:no_change_count0last_first_idcurrent_first_id# 4. 滚动一屏# driver.execute_script(window.scrollBy(0, window.innerHeight * 0.8))time.sleep(0.3)# 虚拟列表渲染很快不需要等太久returnlist(all_data.values())有什么坑坑1滚动太快导致内容没加载现象快速连续滚动到底部发现中间的内容没加载出来。原因懒加载需要时间发起AJAX请求并渲染。滚动太快时中间区域的内容还没来得及加载就被滚过去了。解决每次滚动后等待1-2秒。或者采用渐进式滚动——每次只滚动一屏的高度window.innerHeight等加载完再滚下一屏。坑2scrollIntoView被fixed元素遮挡现象用scrollIntoView滚动到某元素但元素被固定导航栏遮住了看不到也点不到。原因scrollIntoView会把元素滚动到视口顶部但如果页面有fixed定位的导航栏元素会被导航栏盖住。解决滚动后额外下移一段距离留出导航栏的高度// 先滚动到元素再下移导航栏高度element.scrollIntoView(true);window.scrollBy(0,-80);// 上移80px补偿导航栏高度或者用block: center让元素滚动到视口中间element.scrollIntoView({behavior:smooth,block:center});TEMU店群如何管理运营坑3滚动后元素坐标变化导致点击偏移现象滚动后点击某个元素点到了错误的位置。原因滚动后页面布局变化元素的坐标也变了。如果是在滚动前记录的坐标滚动后坐标就不对了。解决滚动后重新定位元素再操作。不要缓存元素的坐标信息。在影刀中每次操作前重新用选择器定位元素。坑4无限滚动页面永远滚不到底现象有些网页如社交媒体时间线可以无限滚动永远到底流程一直跑不停。原因没有设置最大滚动次数或停止条件。解决设置max_scrolls上限如50次或者设置连续N次无新数据就停止的条件。同时设置总数据量上限达到目标数量就停。坑5懒加载图片的URL在data-src而不是src现象采集img标签的src属性得到的是占位图或空白图不是真实图片URL。原因懒加载图片通常把真实URL放在data-src、data-original、data-lazy等自定义属性中src存的是占位图。解决优先读取懒加载属性varsrcimg.getAttribute(data-src)||img.getAttribute(data-original)||img.getAttribute(data-lazy)||img.getAttribute(src);先滚动触发加载等图片加载完成后src属性会更新为真实URL再采集src。
影刀RPA 网页滚动控制滚动到底、滚动到元素、懒加载触发作者林焱什么情况用你用影刀RPA采集一个网页发现只拿到了前几条数据明明页面上有几十条你的网页有个加载更多按钮但需要滚动到底部才会出现有些图片显示空白因为它们是懒加载的——只有滚动到可视区域才加载网页滚动控制是网页自动化中经常被忽略但非常关键的技能。很多现代网页使用懒加载、无限滚动、虚拟列表等技术不主动滚动就无法获取完整数据。本文讲清楚怎么控制网页滚动、怎么触发懒加载、怎么在滚动过程中采集数据。怎么做一、影刀RPA中的滚动操作影刀RPA提供了【网页滚动】指令支持多种滚动方式方式1滚动到页面底部 【网页滚动】→ 滚动方式滚动到底部 方式2滚动到指定元素 【网页滚动】→ 滚动方式滚动到指定元素 → 目标元素//div[idtarget] 方式3滚动指定像素 【网页滚动】→ 滚动方式滚动指定距离 → 像素值500二、用JavaScript控制滚动在影刀的【执行JavaScript脚本】指令或Python代码块中可以更精确地控制滚动// 滚动到页面底部window.scrollTo(0,document.body.scrollHeight);// 滚动到页面顶部window.scrollTo(0,0);// 向下滚动500像素window.scrollBy(0,500);// 平滑滚动到底部[video(video-asK5OueY-1784737323110)(type-csdn)(url-https://live.csdn.net/v/embed/525000)(image-https://v-blog.csdnimg.cn/asset/23da3fe1f67a47106d725406cfde9a97/cover/Cover0.jpg)(title-拼多多店群自动化上架方案)]window.scrollTo({top:document.body.scrollHeight,behavior:smooth});// 滚动到指定元素document.getElementById(target).scrollIntoView();// 平滑滚动到指定元素document.getElementById(target).scrollIntoView({behavior:smooth});三、滚动到底部触发懒加载很多网页如微博、电商商品列表使用无限滚动需要不断滚动到底部才能加载更多数据importtimedefscroll_to_bottom(max_scrolls20,wait_time2): 持续滚动到底部直到没有新内容加载 max_scrolls: 最大滚动次数 wait_time: 每次滚动后等待秒数 last_height0foriinrange(max_scrolls):# 执行JavaScript滚动到底部# 在影刀中使用【执行JavaScript脚本】# window.scrollTo(0, document.body.scrollHeight)# 等待新内容加载time.sleep(wait_time)# 获取当前页面高度# current_height driver.execute_script(return document.body.scrollHeight)current_heightyd_var[page_height]# 假设通过JS获取# 如果高度没变化说明到底了ifcurrent_heightlast_height:print(f第{i1}次滚动页面高度未变化已到底部)breaklast_heightcurrent_heightprint(f第{i1}次滚动页面高度{current_height})returni1# 返回实际滚动次数四、渐进式滚动采集滚动和采集交替进行适合无限滚动页面importtimedefscroll_and_scrape(scrape_func,max_rounds50): 滚动采集交替进行 scrape_func: 每次滚动后的采集函数 max_rounds: 最大轮次 all_data[]seen_idsset()# 用于去重no_new_count0# 连续无新数据的次数forround_numinrange(max_rounds):# 1. 采集当前页面数据current_datascrape_func()# 2. 去重只保留新数据new_count0foritemincurrent_data:item_iditem.get(id,)ifitem_idanditem_idnotinseen_ids:seen_ids.add(item_id)all_data.append(item)new_count1print(f第{round_num1}轮本页{len(current_data)}条新增{new_count}条累计{len(all_data)}条)# 3. 如果连续3次没有新数据认为到底了ifnew_count0:no_new_count1ifno_new_count3:print(连续3次无新数据停止滚动)breakelse:no_new_count0# 4. 滚动到底部# driver.execute_script(window.scrollTo(0, document.body.scrollHeight))time.sleep(2)# 等待加载returnall_data五、滚动到指定元素有些场景需要滚动到页面上某个特定元素位置defscroll_to_element(selector):滚动到指定元素位置# 方法1用JavaScript的scrollIntoViewjs_codef var element document.querySelector({selector}); if (element) {{ element.scrollIntoView({{behavior: smooth, block: center}}); }} # 在影刀中执行这个JavaScript# 方法2先获取元素位置再滚动到该位置js_get_positionf var element document.querySelector({selector}); if (element) {{ var rect element.getBoundingClientRect(); return rect.top window.scrollY; }} return -1; # 获取位置后滚动# driver.execute_script(fwindow.scrollTo(0, {position} - 200))# 实际应用滚动到下一页按钮位置scroll_to_element(.pagination .next-page)time.sleep(1)# 等待滚动完成# 然后点击该按钮六、触发图片懒加载很多网页图片使用懒加载——只有进入可视区域才加载真实图片。采集图片URL时需要先滚动让图片加载deftrigger_lazy_images(max_scrolls30):触发所有懒加载图片importtimeforiinrange(max_scrolls):# 向下滚动一屏的距离# driver.execute_script(window.scrollBy(0, window.innerHeight))time.sleep(0.5)# 检查是否到底# at_bottom driver.execute_script(# return window.innerHeight window.scrollY document.body.scrollHeight - 10# )at_bottomyd_var[at_bottom]ifat_bottom:# 再滚一次确保到底time.sleep(0.5)break# 滚回顶部确保所有图片都触发过# driver.execute_script(window.scrollTo(0, 0))time.sleep(1)# 现在所有图片应该都加载了可以采集src# driver.execute_script(window.scrollTo(0, document.body.scrollHeight))defget_all_image_urls(selectorimg[data-src]):获取所有图片URL包括懒加载的js_codef var images document.querySelectorAll({selector}); var urls []; images.forEach(function(img) {{ // 懒加载图片通常把真实URL放在data-src属性 var src img.getAttribute(data-src) || img.getAttribute(src); if (src !src.startsWith(data:)) {{ urls.push(src); }} }}); return urls; # 执行JS获取URL列表# urls driver.execute_script(js_code)# return urls七、虚拟列表的滚动处理一些现代网页如飞书表格、Notion使用虚拟列表——DOM中只渲染可见区域的元素滚动时动态替换。这种场景需要特殊处理defscrape_virtual_list(get_visible_items_func,max_scrolls100): 采集虚拟列表数据 虚拟列表只渲染可见项需要滚动采集去重 all_data{}last_first_idNoneno_change_count0foriinrange(max_scrolls):# 1. 获取当前可见的数据项visible_itemsget_visible_items_func()# 2. 存入字典去重以id为keyforiteminvisible_items:item_iditem.get(id)ifitem_id:all_data[item_id]item# 3. 检查是否在原地不动current_first_idvisible_items[0].get(id)ifvisible_itemselseNoneifcurrent_first_idlast_first_id:no_change_count1ifno_change_count3:breakelse:no_change_count0last_first_idcurrent_first_id# 4. 滚动一屏# driver.execute_script(window.scrollBy(0, window.innerHeight * 0.8))time.sleep(0.3)# 虚拟列表渲染很快不需要等太久returnlist(all_data.values())有什么坑坑1滚动太快导致内容没加载现象快速连续滚动到底部发现中间的内容没加载出来。原因懒加载需要时间发起AJAX请求并渲染。滚动太快时中间区域的内容还没来得及加载就被滚过去了。解决每次滚动后等待1-2秒。或者采用渐进式滚动——每次只滚动一屏的高度window.innerHeight等加载完再滚下一屏。坑2scrollIntoView被fixed元素遮挡现象用scrollIntoView滚动到某元素但元素被固定导航栏遮住了看不到也点不到。原因scrollIntoView会把元素滚动到视口顶部但如果页面有fixed定位的导航栏元素会被导航栏盖住。解决滚动后额外下移一段距离留出导航栏的高度// 先滚动到元素再下移导航栏高度element.scrollIntoView(true);window.scrollBy(0,-80);// 上移80px补偿导航栏高度或者用block: center让元素滚动到视口中间element.scrollIntoView({behavior:smooth,block:center});TEMU店群如何管理运营坑3滚动后元素坐标变化导致点击偏移现象滚动后点击某个元素点到了错误的位置。原因滚动后页面布局变化元素的坐标也变了。如果是在滚动前记录的坐标滚动后坐标就不对了。解决滚动后重新定位元素再操作。不要缓存元素的坐标信息。在影刀中每次操作前重新用选择器定位元素。坑4无限滚动页面永远滚不到底现象有些网页如社交媒体时间线可以无限滚动永远到底流程一直跑不停。原因没有设置最大滚动次数或停止条件。解决设置max_scrolls上限如50次或者设置连续N次无新数据就停止的条件。同时设置总数据量上限达到目标数量就停。坑5懒加载图片的URL在data-src而不是src现象采集img标签的src属性得到的是占位图或空白图不是真实图片URL。原因懒加载图片通常把真实URL放在data-src、data-original、data-lazy等自定义属性中src存的是占位图。解决优先读取懒加载属性varsrcimg.getAttribute(data-src)||img.getAttribute(data-original)||img.getAttribute(data-lazy)||img.getAttribute(src);先滚动触发加载等图片加载完成后src属性会更新为真实URL再采集src。
