JQuery Detect Scorri in basso

Question

Desidero ottenere il caricamento del contenuto quando l'utente scorre fino alla fine della pagina.

Ho un problema. Funziona bene sui browser desktop ma non sui dispositivi mobili. Ho implementato una soluzione sporca per farlo funzionare su iPhone, ma non è ottimale in quanto non funzionerà su dispositivi mobili di altre dimensioni.

Il mio sito è www.cristianrgreco.com, scorrere verso il basso per vedere l'effetto in azione

Il problema è l'aggiunta il rotolo e l'altezza non è uguale l'altezza su dispositivi mobili, mentre fanno su browser desktop.

C'è un modo per rilevare per i browser mobili?

Grazie in anticipo.

seguito è riportato il codice attualmente in uso:

$(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

Per chi guarda qui in seguito, ho risolto questo con l'aggiunta height=device-height al tag meta viewport:

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

Puoi quindi continuare a utilizzare $(document).scroll(function(){});

Questo ha funzionato con iOS 5

Answer 2

Avete aggiunto il meta tag per iPhone, che imposta la dimensione contenuto alla finestra del telefono cellulare?

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

EDIT:

Così ho provato questo sul mio telefono (Android, pan di zenzero) e il problema non è stato tanto il codice non lavora è stato il contenuto visualizzato non forzare la pagina per scorrere. Non appena ho ingrandito e fatto scorrere verso il basso più contenuti caricati dinamicamente. Puoi provare ad aggiungere contenuti fino a quando il contenuto aggiunto è maggiore di $ (window) .height();

Answer 3

proiettile modo la prova per ottenere l'altezza documento su tutti i browser:

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

è anche possibile utilizzare un plugin di scorrimento infinito: https://github.com/fredwu/jquery-endless-scroll https://github.com/paulirish/infinite-scroll

sto usando la scroll infinito e funziona benissimo sul mio portatile e iphone

Answer 5

Se puoi, dovresti davvero evitare di cercare un numero esatto.

Utilizzando la funzione di Stelok sopra, è possibile verificare in questo modo:

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

è un po 'più morbido - l'utente non può avere abbastanza scorrere l'esatta all'ultimo pixel, ma pensa lui/lei è in fondo.

Answer 6

Ecco un aggregato delle altre risposte che funziona molto bene per me. Potrebbe essere scritto come plugin jQuery qualche volta.

// 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(); 
} 

di utilizzare questo nel codice, aggiungere qualcosa di simile:

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

grandi opere per il mio PhoneGap/Cordova app.

Answer 7

una versione migliorata jQuery del codice

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

Questo è ciò che ha funzionato per me:

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

trovate qui: Javascript: How to detect if browser window is scrolled to bottom?

Answer 9

utilizzando jQuery e Strelok di getDocumentHeight() di seguito (applausi!) Ho trovato che il seguente ha funzionato abbastanza bene. Test per l'uguaglianza non ha funzionato per me come l'iPhone registrato solo un valore di scorrimento alla fine dello scivolo che era in realtà superiore all'altezza documento:

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

Answer 10

Anche se la domanda è stato chiesto 5 anni fa, ancora è più che rilevante nel contesto UI/UX di oggi. E vorrei aggiungere i miei due centesimi.

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

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