用Javascript滾動(dòng)到頁面底部，并能正確判斷出頁面已到底部的方法

kviccn 發(fā)布于2019-08-22 11:59 / 2259人閱讀

摘要：所以下面這段代碼就是通過逐步滾動(dòng)到頁面底端，并且能判斷出頁面已達(dá)到底端來把綁定的定時(shí)器清掉，以免造成死循環(huán)。

現(xiàn)在的頁面大部分都是通過Js渲染來顯示頁面的，也就是如果不滾動(dòng)到頁面底部就無法獲取整個(gè)頁面的HTML源碼，如果通過CURL等抓取網(wǎng)頁那么基本上抓取到都是一堆javascript代碼。

所以就有了webkit爬蟲，把整個(gè)頁面渲染完了再抓取。這個(gè)到達(dá)頁面底部的操作通常是在webkit中執(zhí)行Js來完成的，注意如果通過js直接跳到底部頁面只會(huì)渲染底部的HTML，中間的部分是不會(huì)渲染的。所以下面這段代碼就是通過js逐步滾動(dòng)到頁面底端，并且能判斷出頁面已達(dá)到底端來把setIntervel綁定的定時(shí)器清掉，以免造成死循環(huán)。

var delay = 10;//in milliseconds
var scroll_amount = 10;// in pixels
var interval;
function scroller() {
    var old = document.body.scrollTop;//保存當(dāng)前滾動(dòng)條到頂端的距離
    document.body.scrollTop += scroll_amount;//讓滾動(dòng)條繼續(xù)往下滾動(dòng)
    if (document.body.scrollTop == old) {//到底部后就無法再增加scrollTop的值
        clearInterval(interval);
    }
}
function scrollToBottom()
{
  interval = setInterval("scroller()",delay);
}

scrollToBottom()

用Python的ghost.py庫來做webkit爬蟲時(shí)就可以用它的evaluate方法執(zhí)行這段代碼來渲染出整個(gè)頁面。

云服務(wù)器 GPU云服務(wù)器 js判斷正確跳轉(zhuǎn)頁面頁面底部固定頁面底部 footer頁面底部

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92338.html

相關(guān)文章

js實(shí)現(xiàn) web頁面的滾動(dòng)條下拉時(shí)加載更多

摘要：一個(gè)更佳的方式是，當(dāng)滾動(dòng)條距離底部一定距離時(shí)，就動(dòng)態(tài)加載更多，向服務(wù)端請(qǐng)求資源。代碼總頁數(shù)當(dāng)前頁數(shù)滾動(dòng)條距離底部的距離沒有更多了分頁列表的接口相關(guān)參考頁面在滾動(dòng)條下拉時(shí)加載更多內(nèi)容個(gè)人項(xiàng)目經(jīng)驗(yàn)下拉加載更多實(shí)現(xiàn)監(jiān)聽滾動(dòng)事件不執(zhí)行 js實(shí)現(xiàn) web頁面的滾動(dòng)條下拉時(shí)加載更多在手機(jī)上，數(shù)據(jù)列表的分頁都是下拉到底部的時(shí)候會(huì)加載更多，但是，去年三月份的時(shí)候遇到了客戶要求web頁面也要下拉加載更...

antyiwei 2019-08-23 11:35 評(píng)論0 收藏0
【JavaScript系列】vue項(xiàng)目中實(shí)現(xiàn)滾動(dòng)條（具體視窗口的滾動(dòng)條）操作：（1）置底，（2）置于

摘要：滾動(dòng)條不會(huì)出現(xiàn)在頭部和底部視窗中。新增功能滾動(dòng)條置底分頁加載的時(shí)候，保持滾動(dòng)條置于上次停留的位置。我們來看一下動(dòng)態(tài)圖，實(shí)現(xiàn)的功能今天只把這個(gè)具體視窗口的滾動(dòng)條的總結(jié)一下，其他兩個(gè)問題，沒有很大的意義。一、前言之前寫了一個(gè)happyChat的項(xiàng)目，主要是想學(xué)習(xí)一下socketIO的使用。然后最近在給happyChat做前端優(yōu)化和升級(jí)。發(fā)現(xiàn)第一版做的很low。需要優(yōu)化的問題： 1、問...

lovXin 2019-08-26 14:00 評(píng)論0 收藏0
微信里面防止下拉"露底"組件

摘要：從本人這兩個(gè)月移動(dòng)實(shí)踐的經(jīng)驗(yàn)來看，微信的里面和的滑動(dòng)效果無論是在安卓還是下的體驗(yàn)都很一般，有明顯的卡頓現(xiàn)象，在安卓下面還會(huì)出現(xiàn)滑動(dòng)過快的時(shí)候在頁面停下來之后滾動(dòng)條才閃到相應(yīng)位置的現(xiàn)象。前言在微信里面瀏覽頁面的時(shí)候，有一個(gè)很管用的方法可以區(qū)分這個(gè)頁面是原生的還是H5形式的。隨便打開一個(gè)頁面，用力往下扯的時(shí)候，如果頁面上方出現(xiàn)了黑底，黑底上有一行諸如網(wǎng)頁由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 評(píng)論0 收藏0
用getBoundClientRect檢測(cè)瀏覽器滾動(dòng)到底部事件

摘要：很多時(shí)候比如下拉加載更多這種組件都需要檢測(cè)滾動(dòng)到底部事件。很明顯就可以得出滾動(dòng)到底部的判斷判斷是否滾動(dòng)到底部上面這個(gè)方法比較麻煩還要處理瀏覽器兼容性。很多時(shí)候比如下拉加載更多這種組件都需要檢測(cè)滾動(dòng)到底部事件。一般我們的做法是這個(gè)樣子，先獲取視窗高度window.innerHeight，然后獲取整個(gè)html文檔高度document.body.scrollHeight,再獲取滾動(dòng)條卷上去...

awkj 2019-08-20 16:32 評(píng)論0 收藏0
結(jié)合Vue 的滾動(dòng)底部加載

摘要：項(xiàng)目手機(jī)端分頁跳轉(zhuǎn)不理想，自己做了一個(gè)滾動(dòng)加載的一個(gè)核心結(jié)構(gòu)加載中代碼使用思維導(dǎo)圖，優(yōu)雅的完成自己的代碼左滑右滑的樂趣九高可用的分布式配置中心集成服務(wù)業(yè)務(wù)上碰到的問題整理集合年，前端應(yīng)該怎么學(xué)前端請(qǐng)求的優(yōu)雅方案技術(shù)周刊什么服務(wù)器炸了開項(xiàng)目手機(jī)端分頁跳轉(zhuǎn)不理想，自己做了一個(gè)滾動(dòng)加載的一個(gè)Demo 核心Dom結(jié)構(gòu) {{l.title...

graf 2019-08-22 11:18 評(píng)論0 收藏0