JS页面滚动

最新推荐文章于 2025-11-06 14:08:28 发布

原创最新推荐文章于 2025-11-06 14:08:28 发布 · 6.8k 阅读

3 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

前言

JavaScript技术大发展的今天，越来越多的网页都深入使用了JavaScript技术。在做爬虫的时候，请求的页面不一定是最终的看到的效果，可能需要再浏览器中执行一些脚本才能出现我们最终看到的页面。静态爬虫就无法爬取动态生成的页面。Phantomjs是一个无界面的浏览器，可以模拟浏览器去访问，如果需要执行脚本，也有相应的接口。

Selenium 是目前用的最广泛的Web UI 自动化测试框架。selenium-java是selenium的一个java包，相关知识可以自行百度。selenium-java可以支持日常使用的几乎所有类型的浏览器，另外，还支持Phantomjs和htmlunit。以Phantomjs为例，说一下自己的使用情况。

使用Phantomjs解析页面的目的是预测到页面需要运行脚本，才能获取HTML源码的情况。如果是静态页面当然也可以用Phantomjs，但是访问速度不如其他工具。

Phantomjs解析动态页面一般要触发页面事件才能执行脚本，我遇到的情况跟微博访问的情况类似，需要不断的页面滚动才能不断的拿到数据。

代码示例

自己的一段简单的代码

var i=0;
var interval = window.setInterval(function(){
    i=i+768;
    window.scrollTo(0,i);
    if(i >= document.body.scrollHeight){
        btn = document.querySelector("XXX");
        if(btn)
            btn.click();
        else {
            clearInterval(interval);
            setTimeout(function(){
                window.scrollTo(0,document.body.scrollHeight);
            },1000);
        }
    }
},1500);

使用selenium-java的Phantomjs接口，直接运行上边的脚本，基本保证能滚动到页面底部，因为有的页面当滚动过快或者网站某些机制会在滚动到底部之前出现一个按钮，在上面配置上就可以了。

另一段代码

下面的一点代码是UI 测试之：保证页面滚动到底部提供的。

/**
 * 保证页面滚动到底部
 */
function scrollToBottom (callback) {

    var TIMES = 10  // 最多滚动10次，防止无限加载
        , INTERVAL = 600  // 每次滚动之间的间隔时间，太短有可能不会触发懒加载事件
        , delta = 1500    // 每次的滚动距离，太长有可能导致之间有的部分未加载
        , preScrollTop = 0  // 滚动前的 window.scrollTop 值
        , curScrollTOp = 0;  // 滚动后的 window.scrollTop 值

    var scroll = function () {
        preScrollTop = $(window).scrollTop();
        TIMES --;
        $(window).scrollTop(preScrollTop + delta);
    };

    scroll();

    var timer = setInterval(function () {

        curScrollTOp = $(window).scrollTop();

        if (TIMES <= 0 || (curScrollTOp - preScrollTop) <= 3 ) {
            // 滚动结束
            clearInterval(timer);
            return callback();
        }

        scroll();

    }, INTERVAL);

}