用Javascript滚动到页面底部，并能正确判断出页面已到底部的方法

kviccn 发布于2019-08-22 11:59 / 2202人阅读

摘要：所以下面这段代码就是通过逐步滚动到页面底端，并且能判断出页面已达到底端来把绑定的定时器清掉，以免造成死循环。

现在的页面大部分都是通过Js渲染来显示页面的，也就是如果不滚动到页面底部就无法获取整个页面的HTML源码，如果通过CURL等抓取网页那么基本上抓取到都是一堆javascript代码。

所以就有了webkit爬虫，把整个页面渲染完了再抓取。这个到达页面底部的操作通常是在webkit中执行Js来完成的，注意如果通过js直接跳到底部页面只会渲染底部的HTML，中间的部分是不会渲染的。所以下面这段代码就是通过js逐步滚动到页面底端，并且能判断出页面已达到底端来把setIntervel绑定的定时器清掉，以免造成死循环。

var delay = 10;//in milliseconds
var scroll_amount = 10;// in pixels
var interval;
function scroller() {
    var old = document.body.scrollTop;//保存当前滚动条到顶端的距离
    document.body.scrollTop += scroll_amount;//让滚动条继续往下滚动
    if (document.body.scrollTop == old) {//到底部后就无法再增加scrollTop的值
        clearInterval(interval);
    }
}
function scrollToBottom()
{
  interval = setInterval("scroller()",delay);
}

scrollToBottom()

用Python的ghost.py库来做webkit爬虫时就可以用它的evaluate方法执行这段代码来渲染出整个页面。

GPU云服务器云服务器 js判断正确跳转页面页面底部固定页面底部 footer页面底部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92338.html

js实现 web页面的滚动条下拉时加载更多

摘要：一个更佳的方式是，当滚动条距离底部一定距离时，就动态加载更多，向服务端请求资源。代码总页数当前页数滚动条距离底部的距离没有更多了分页列表的接口相关参考页面在滚动条下拉时加载更多内容个人项目经验下拉加载更多实现监听滚动事件不执行 js实现 web页面的滚动条下拉时加载更多在手机上，数据列表的分页都是下拉到底部的时候会加载更多，但是，去年三月份的时候遇到了客户要求web页面也要下拉加载更...

antyiwei 2019-08-23 11:35 评论0 收藏0
【JavaScript系列】vue项目中实现滚动条（具体视窗口的滚动条）操作：（1）置底，（2）置于

摘要：滚动条不会出现在头部和底部视窗中。新增功能滚动条置底分页加载的时候，保持滚动条置于上次停留的位置。我们来看一下动态图，实现的功能今天只把这个具体视窗口的滚动条的总结一下，其他两个问题，没有很大的意义。一、前言之前写了一个happyChat的项目，主要是想学习一下socketIO的使用。然后最近在给happyChat做前端优化和升级。发现第一版做的很low。需要优化的问题： 1、问...

lovXin 2019-08-26 14:00 评论0 收藏0
微信里面防止下拉"露底"组件

摘要：从本人这两个月移动实践的经验来看，微信的里面和的滑动效果无论是在安卓还是下的体验都很一般，有明显的卡顿现象，在安卓下面还会出现滑动过快的时候在页面停下来之后滚动条才闪到相应位置的现象。前言在微信里面浏览页面的时候，有一个很管用的方法可以区分这个页面是原生的还是H5形式的。随便打开一个页面，用力往下扯的时候，如果页面上方出现了黑底，黑底上有一行诸如网页由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 评论0 收藏0
用getBoundClientRect检测浏览器滚动到底部事件

摘要：很多时候比如下拉加载更多这种组件都需要检测滚动到底部事件。很明显就可以得出滚动到底部的判断判断是否滚动到底部上面这个方法比较麻烦还要处理浏览器兼容性。很多时候比如下拉加载更多这种组件都需要检测滚动到底部事件。一般我们的做法是这个样子，先获取视窗高度window.innerHeight，然后获取整个html文档高度document.body.scrollHeight,再获取滚动条卷上去...

awkj 2019-08-20 16:32 评论0 收藏0
结合Vue 的滚动底部加载

摘要：项目手机端分页跳转不理想，自己做了一个滚动加载的一个核心结构加载中代码使用思维导图，优雅的完成自己的代码左滑右滑的乐趣九高可用的分布式配置中心集成服务业务上碰到的问题整理集合年，前端应该怎么学前端请求的优雅方案技术周刊什么服务器炸了开项目手机端分页跳转不理想，自己做了一个滚动加载的一个Demo 核心Dom结构 {{l.title...

graf 2019-08-22 11:18 评论0 收藏0