JQuery檢測滾動底部

Question

我希望在用戶滾動到頁面底部時實現內容加載。

我有問題。它適用於桌面瀏覽器，但不適用於移動設備。我實施了一個骯髒的修復程序，使其在iPhone上工作，但不是最佳的，因爲它不適用於其他大小的移動設備。

我的網站是www.cristianrgreco.com，向下滾動，在行動中看到

問題是添加滾動和高度不等於高度在移動設備上，而他們在桌面瀏覽器做的效果。

有沒有辦法檢測到移動瀏覽器？

在此先感謝。

下面是目前正在使用的代碼：

$(document).ready(function() { 
     $(".main").hide().filter(":lt(3)").show(); 
     if ($(document).height() == $(window).height()) { 
      // Populate screen with content 
     } 
     else if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { 
      window.onscroll = function() { 
       if ($(document).height() - $(window).scrollTop() <= 1278) { 
        // At the moment only works on iPhone 
       } 
      } 
     } 
     else { 
      $(window).scroll(function() { 
       if ($(window).scrollTop() + $(window).height() >= $(document).height()) {      
        // Works perfect for desktop browsers 
       } 
      }) 
     } 
}) 

Answer 1

對於任何人誰看這裏後，我解決了這個加height=device-height到meta視標籤：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 

你可以然後繼續使用$(document).scroll(function(){});

這與iOS 5工作

Answer 2

您已經添加了iPhone手機的元標籤，該標籤將內容大小到手機的視口？

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

編輯：

所以，我想這是我的手機（Android的薑餅）上的問題是沒有這麼多不工作它顯示的內容不強制頁面滾動的代碼。只要我放大並動態加載更多內容。您可以嘗試添加內容，直到添加的內容大於$（window）.height（）;

Answer 3

防彈的方式來獲得文件的高度在所有瀏覽器：

function getDocumentHeight() { 
    return Math.max(
     Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 
     Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), 
     Math.max(document.body.clientHeight, document.documentElement.clientHeight) 
    ); 
} 

Answer 4

你也可以使用無限滾動的插件：https://github.com/fredwu/jquery-endless-scroll https://github.com/paulirish/infinite-scroll

我使用的是無盡的滾動，它在我的筆記本電腦和iphone

Answer 5

的偉大工程

如果可以的話，你應該避免嘗試擊中確切的數字。

使用上述Stelok的功能，你可以測試這樣的：

if ($win.height() + $win.scrollTop() > (getDocumentHeight()-10)) { 

這是一個有點軟 - 用戶可能不會很滾動到確切的最後一個像素，但認爲他/她是在底部。

Answer 6

下面是其他答案的總和，這對我來說效果很好。它可以在某個時候寫成一個jQuery插件。

// Handles scrolling past the window up or down to refresh or load more data. 
var scrolledPastTop = false; 
var scrolledPastBottom = false; 
var scrollPrevious = 0; 

function getDocumentHeight() { 
    return Math.max(
     Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 
     Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), 
     Math.max(document.body.clientHeight, document.documentElement.clientHeight) 
); 
} 

function bottomScrollRefresh(callback) { 
    var pastBottom = $window.height() + $window.scrollTop() > getDocumentHeight(); 
    if(!scrolledPastBottom && pastBottom) { 
    callback($window.height() + $window.scrollTop()); 
    scrolledPastBottom = true; 
    } else { 
    if(!pastBottom) scrolledPastBottom = false; 
    } 
    scrollPrevious = $window.scrollTop(); 
} 

function topScrollRefresh(callback) { 
    var pastTop = $window.scrollTop() < scrollPrevious && $window.scrollTop() <= 0; 
    if(!scrolledPastTop && pastTop) { 
    callback($window.scrollTop()); 
    scrolledPastTop = true; 
    } else { 
    if(!pastTop) scrolledPastTop = false; 
    } 
    scrollPrevious = $window.scrollTop(); 
} 

要在代碼中使用這一點，添加這樣的事情：

window.onscroll = function() { 
    topScrollRefresh(function(pos) { 
     console.log("Loading top. " + pos); 
    }); 
    bottomScrollRefresh(function(pos) { 
    console.log("Loading bottom. " + pos); 
    }); 
}; 

我的PhoneGap /科爾多瓦應用程序的偉大工程。

Answer 7

一種改進代碼的jQuery的版本

var scrollRefresh = { 
    pastTop: false, 
    pastBottom: false, 
    previous: 0, 
    bottom: function(callback) { 
     var pBottom = $(window).height() + $(window).scrollTop() >= $(document).height(); 
     if(!this.pastBottom && pBottom) { 
     callback($(window).height() + $(window).scrollTop()); 
     this.pastBottom = true; 
     } else { 
     if(!pBottom) this.pastBottom = false; 
     } 
     this.previous = $(window).scrollTop(); 
    }, 
    top: function(callback) { 
     var pTop = $(window).scrollTop() < this.scrollPrevious && $(window).scrollTop <= 0; 
     if(!this.pastTop && pTop) { 
     callback($(window).scrollTop()); 
     this.pastTop = true; 
     } else { 
     if(!pTop) this.pastTop = false; 
     } 
     this.previous = $(window).scrollTop(); 
    } 
    } 

    $(window).scroll(function() { 
    scrollRefresh.top(function(pos) { 
     console.log("Loading top. " + pos); 
     alert("scrolled to top"); //You should delete this line 
    }); 
    scrollRefresh.bottom(function(pos) { 
     console.log("Loading bottom. " + pos); 
     alert("scrolled to bottom"); //You should delete this line 
    }); 
    }); 

Answer 8

這是對我工作：

(window.innerHeight + window.scrollY) == $(document).height() 

這裏找到： Javascript: How to detect if browser window is scrolled to bottom?

Answer 9

使用jQuery和下面Strelok的getDocumentHeight()（乾杯！ ）我發現以下工作非常好。平等的測試並沒有爲我工作的iPhone只能在這實際上比原稿的高度越大，幻燈片結束註冊的滾動值：

$(window).scroll(function() { 
    var docHeight = getDocumentHeight();   
    if ($(window).scrollTop() + $(window).height() >= docHeight) { 
    // Do stuff 
    } 
}); 

Answer 10

雖然有人問5年前，它還是在今天的用戶界面/用戶體驗環境中更具有相關性。我想補充我的兩分錢。

var element = document.getElementById('flux'); 
if (element.scrollHeight - element.scrollTop === element.clientHeight) 
{ 
    // element is at the end of its scroll, load more content 
} 

來源：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled