Alert utilizzando jQuery quando Scorrere fino alla fine della pagina

StackOverflow https://stackoverflow.com/questions/3799542

  •  05-10-2019
  •  | 
  •  

Domanda

C'è un modo per scoprire fine pagina utilizzando jQuery, in modo che un semplice messaggio può essere visualizzato dicendo che avete raggiunto la fine della pagina.

È stato utile?

Soluzione

Come dire quando si' re in fondo a una pagina : 

if (  document.documentElement.clientHeight + 
      $(document).scrollTop() >= document.body.offsetHeight )
{ 
    // Display alert or whatever you want to do when you're 
    //   at the bottom of the page. 
    alert("You're at the bottom of the page.");
}

Naturalmente si vuole sparare sopra ogni volta che l'utente scorre: 

$(window).scroll(function() {
    if (  document.documentElement.clientHeight + 
          $(document).scrollTop() >= document.body.offsetHeight )
    { 
        // Display alert or whatever you want to do when you're 
        //   at the bottom of the page. 
        alert("You're at the bottom of the page.");
    }
});

Ecco un esempio jsFiddle che sfuma in un "Sei fatto! Scorrere fino a Top of del link" quando l'utente ha fatto scorrere la parte inferiore della pagina.

References:

Altri suggerimenti

Questo funziona e ho testato in IE 7,8,9, FF 3.6, Chrome 6 e Opera 10.6 

$(window).scroll(function()
{
    if (document.body.scrollHeight - $(this).scrollTop()  <= $(this).height())
    {
        alert('end');
    }
});

Se le soluzioni precedenti non funzionano si prega di verificare se si imposta il tipo di documento a destra: 

<!DOCTYPE HTML>

Mi ha portato un'ora per scoprire:)

Per evitare console.log('end of page') duplicato, è necessario creare un setTimeout, in questo modo: 

var doc = $(document), w = $(window), timer;

doc.on('scroll', function(){

    if(doc.scrollTop() + w.height() >= doc.height()){

        if(typeof timer !== 'undefined') clearTimeout(timer);

        timer = setTimeout(function(){
            console.log('end of page');
        }, 50);

    }

});

Si potrebbe avere bisogno di tweaking per conto per i browser, ma qualcosa di simile dovrebbe fare: 

$(document).scroll(function()
{
    var $body = $('body');
    if (($body.get(0).scrollHeight - $body.scrollTop) == $body.height())
    {
        // display your message
    }
});

Nota per il debug: (?) Mi è stato sempre l'allarme sul ritorno alla parte superiore della pagina utilizzando jquery-1.10.2.js. Loaded jquery-1.6.4.min.js e tutto va bene.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top