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

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

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

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

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

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;//讓滾動條繼續(xù)往下滾動
    if (document.body.scrollTop == old) {//到底部后就無法再增加scrollTop的值
        clearInterval(interval);
    }
}
function scrollToBottom()
{
  interval = setInterval("scroller()",delay);
}

scrollToBottom()

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

云服務器 GPU云服務器 js判斷正確跳轉頁面頁面底部固定頁面底部 footer頁面底部

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92338.html

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

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

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

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

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

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

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

graf 2019-08-22 11:18 評論0 收藏0