NO.003-如何判断网页是否滑动到了底部——By.杭州组

作者：启航

关键词：懒加载，虚拟列表

---------------------------------------------------------------------------------------------------------------------------------------------------------------

一、问题背景

某些网站是懒加载网站，用户在抓取网页上面的数据的时候不知道要滑动多久才能滑动到底部

二、普通网页

以抖音短视频网址为例：https://www.douyin.com/video/7145794915711159559

情况一：有元素标志的

方案一：判断页面到底提示元素

滑动到底部直接捕获元素进行判断

情况二：通用(有元素标志和无元素标志都可以使用)

方案一：判断滚动条距离

使用document.documentElement.scrollTop，获取滚动条在垂直方向上滚动的距离，判断是否有2次滚动距离一致如果一致则滑动到了底部。

function (element, input) {
    let num = document.documentElement.scrollTop
    return num
}

方法二：判断滚动条位置

当：滚动条当前的位置 + 当前可视范围的高度 >= 文档完整的高度   时网页就滚动到底部了
即：document.body.scrollTop + document.documentElement.clientHeight >=document.documentElement.scrollHeight

function (element, input) {
    // 滚动条距离顶部的距离
    let scrollTop = document.documentElement.scrollTop  
    // 可视区的高度
    let windowHeight = document.documentElement.clientHeight 
    //dom元素的高度，包含溢出不可见的内容
    let scrollHeight = document.documentElement.scrollHeight 
    // 滚动条到底部的条件scrollTop + windowHeight === scrollHeight
    if (scrollTop + windowHeight >= scrollHeight) {
      return '加载到底部'
    }
}

方法三：判断网页元素数量

通过判断网页中不断加载出来元素的相似元素个数来判断，如果元素个数不变则加载到底部了

三、虚拟列表网页

以聚水潭网页为例：https://daili.jushuitan.com/

账号和密码为聚水潭官方给出的测试账号

账号：sku@jst.com

密码：1a2b3c4d

方案一：判断滚动条距离

获取滚动条在垂直方向上滚动的距离，判断是否有2次滚动距离一致如果一致则滑动到了底部。

依然适用于虚拟列表
找到带有滚动条的目标元素即带有overflow属性，属性值为auto或者scroll
如果找到的目标元素没有该属性则找其父元素
如下图所示：F12打开开发者模式，去找目标元素

捕获该元素：随便捕获一个表格内的元素，根据属性找到目标元素所在的标签勾选上其特有的属性，把该标签下面的标签全部不勾选

function (element, input) {
    return element.scrollTop;
}

方法二：循环判断重复元素

捕获相似元素组，获取相似元素文本列表，把得到的数据存放在一个空列表中，判断最后一个元素文本是否在前面的列表里面出现过，如果出现过则退出循环
测试网页中有订单序号，直接使用该订单序号即可