Alerte à l'aide Jquery lorsque Faites défiler jusqu'à la fin de la page

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

  •  05-10-2019
  •  | 
  •  

Question

Est-il possible de trouver la fin de page à l'aide Jquery, de sorte qu'un simple message peut être affiché Voulez-vous dire avoir atteint la fin de la page.

Était-ce utile?

La solution

Comment dire quand vous » re au bas d'une page : 

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.");
}

Bien sûr, vous voulez tirer ce qui précède chaque fois que l'utilisateur fait défiler: 

$(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.");
    }
});

Voici un exemple jsFiddle qui se fond dans un « Vous êtes fait! défiler au haut de la page » lorsque l'utilisateur a fait défiler au bas de la page.

Références:

Autres conseils

Cela fonctionne et je testé dans IE 7,8,9, FF 3.6, Chrome 6 et Opera 10.6 

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

Si les solutions ci-dessus ne fonctionnent pas s'il vous plaît vérifier si vous définissez votre type de document à droite: 

<!DOCTYPE HTML>

m'a fallu une heure pour savoir:)

Pour éviter console.log('end of page') double, vous devez créer un setTimeout, comme ceci: 

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);

    }

});

Il pourrait avoir besoin de peaufinage pour compte pour les navigateurs, mais quelque chose comme ça devrait le faire: 

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

Note pour le débogage: (?) Je recevais l'alerte sur le retour en haut de la page à l'aide jquery-1.10.2.js. Loaded jquery-1.6.4.min.js et tout va bien.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top