Controlla se un utente ha fatto scorrere verso il basso

Sto creando un sistema di impaginazione (un po 'come Facebook) in cui il contenuto viene caricato quando l'utente scorre verso il basso. Immagino che il modo migliore per farlo sia trovare quando l'utente si trova in fondo alla pagina ed eseguire una query Ajax per caricare più post.

L'unico problema è che non so come verificare se l'utente ha scorrere fino alla fine della pagina con jQuery. Qualche idea?

Devo trovare un modo per verificare quando l'utente è passato alla fine della pagina con jQuery.

Usa l' .scroll()evento on window, in questo modo:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

Puoi provarlo qui , questo prende lo scorrimento superiore della finestra, quindi quanto è scorrere verso il basso, aggiunge l'altezza della finestra visibile e controlla se questo è uguale all'altezza del contenuto complessivo ( document). Se invece volessi verificare se l'utente si trova vicino al fondo, sarebbe simile a questo:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

Puoi testare quella versione qui , basta regolarla 100su qualsiasi pixel dal basso che vuoi attivare.

La risposta di Nick Craver funziona bene, risparmiando il problema che il valore di $(document).height()varia a seconda del browser.

Per farlo funzionare su tutti i browser, usa questa funzione di James Padolsey :

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

al posto di $(document).height(), in modo che il codice finale sia:

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });

Non sono esattamente sicuro del perché questo non sia stato ancora pubblicato, ma secondo la documentazione di MDN , il modo più semplice è utilizzare le proprietà javascript native:

element.scrollHeight - element.scrollTop === element.clientHeight

Restituisce vero quando sei in fondo a qualsiasi elemento scorrevole. Quindi semplicemente usando javascript:

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeighthanno un ampio sostegno nei browser, da IE 8 per essere più precisi, mentre clientHeighte scrollTopsono entrambi supportati da tutti. Anche ie 6. Questo dovrebbe essere sicuro tra browser.

Per coloro che utilizzano la soluzione di Nick e ricevono ripetuti avvisi / eventi, è possibile aggiungere una riga di codice sopra l'esempio di avviso:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

Ciò significa che il codice verrà attivato solo la prima volta che ci si trova entro 100 px dalla parte inferiore del documento. Non si ripeterà se si scorre di nuovo verso l'alto e poi verso il basso, il che può essere utile o meno a seconda dell'uso del codice di Nick.

Oltre all'eccellente risposta accettata da Nick Craver, puoi limitare l'evento scroll in modo che non venga attivato così frequentemente aumentando così le prestazioni del browser :

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}

La risposta di Nick Craver deve essere leggermente modificata per funzionare su iOS 6 Safari Mobile e dovrebbe essere:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

Cambiare $ .height (finestra) () per window.innerHeight dovrebbe essere fatto, perché quando la barra degli indirizzi è nascosto un ulteriore 60px vengono aggiunti alla altezza della finestra, ma utilizzando $(window).height()non senza riflettere questo cambiamento, pur utilizzando window.innerHeightlo fa.

Nota : la window.innerHeightproprietà include anche l'altezza della barra di scorrimento orizzontale (se è renderizzata), diversamente da quella $(window).height()che non includerà l'altezza della barra di scorrimento orizzontale. Questo non è un problema in Mobile Safari, ma potrebbe causare comportamenti imprevisti in altri browser o versioni future di Mobile Safari. Passare ==a >=potrebbe risolvere questo problema per i casi d'uso più comuni.

Maggiori informazioni sulla window.innerHeightproprietà qui

Ecco un approccio abbastanza semplice

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

Esempio

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

Da dove elmviene recuperato un elemento, ad es document.getElementById.

Ecco un pezzo di codice che ti aiuterà a eseguire il debug del tuo codice, ho testato le risposte sopra e ho trovato che erano buggy. Ho testato i seguenti su Chrome, IE, Firefox, IPad (Safari). Non ne ho altri installati per testare ...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

Ci può essere una soluzione più semplice, ma mi sono fermato al punto in cui HA FUNZIONATO

Se hai ancora problemi con alcuni browser non autorizzati, ecco un codice per aiutarti a eseguire il debug:

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

Spero che questo salverà qualcuno un po 'di tempo.

Si prega di controllare questa risposta

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

Puoi fare footerHeight - document.body.offsetHeightper vedere se sei vicino al piè di pagina o hai raggiunto il piè di pagina

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

Calcola la barra di scorrimento della distanza nella parte inferiore dell'elemento. Uguale a 0, se la barra di scorrimento ha raggiunto il fondo.

Questi sono i miei due centesimi:

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

JS puro con cross-browser e debouncing ( prestazioni abbastanza buone )

var CheckIfScrollBottom = debouncer(function() {
    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
       console.log('Bottom!');
    }
},500);

document.addEventListener('scroll',CheckIfScrollBottom);

function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

Demo: http://jsbin.com/geherovena/edit?js,output

PS: Debouncer, getScrollXY, getDocHeightnon è scritto da me

Mostro solo come funziona e come lo farò

La mia soluzione in js semplice:

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
        alert('Bottom');
    }
});

#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Prova questo per condizioni di corrispondenza se scorri fino alla fine

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Nick risponde bene ma avrai funzioni che si ripetono durante lo scorrimento o non funzioneranno affatto se l'utente ha la finestra ingrandita. Ho escogitato una soluzione semplice solo matematicamente intorno alla prima altezza e funziona esattamente come previsto.

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

Puoi provare il seguente codice,

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

Ciò fornisce risultati accurati, quando si controlla un elemento scorrevole (cioè non window):

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeightdovrebbe fornire l' altezza visibile effettiva di un elemento (inclusi riempimento, margine e barre di scorrimento) ed scrollHeightè l' intera altezza di un elemento comprese le aree invisibili (traboccate).

jQuery's .outerHeight()dovrebbe dare risultato simile a JS di .offsetHeight- la documentazione in MDN per offsetHeightè poco chiaro circa il suo supporto cross-browser. Per coprire più opzioni, questo è più completo:

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

Invece di ascoltare l'evento scroll, usare Intersection Observer è quello economico per verificare se l'ultimo elemento era visibile nella finestra (ciò significa che l'utente è stato fatto scorrere verso il basso). Supportava anche IE7 con il polyfill .

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Tutte queste soluzioni non funzionano su Firefox e Chrome, quindi uso le funzioni personalizzate di Miles O'Keefe e meder omuraliev in questo modo:

function getDocHeight()
{
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

Ecco i miei due centesimi poiché la risposta accettata non ha funzionato per me.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;

Vorrei mostrare l'approvazione senza JQuery. Semplice funzione JS:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

Breve esempio su come usarlo:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

Ho usato @ddanone Answear e ho aggiunto la chiamata Ajax.

$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}

}

Per interrompere il ripetuto allarme della risposta di Nick

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}

Google Chrome fornisce l'intera altezza della pagina se chiami $(window).height()

Invece, usa window.innerHeight per recuperare l'altezza della tua finestra. Il controllo necessario dovrebbe essere:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Apparentemente ciò che ha funzionato per me era "corpo" e non "finestra" in questo modo:

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

per la compatibilità tra browser utilizzare:

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

e quindi invece di $ (document) .height () chiama la funzione getheight ()

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

per un uso quasi dal basso:

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });