web-dev-qa-db-fra.com

Charger ajax lorsque le défilement atteint 80%

J'utilise le code suivant qui fonctionne lorsque la barre de défilement atteint le bas,

if($(window).scrollTop() == $(document).height() - $(window).height()){

Je veux cependant que l'ajax soit déclenché lorsque j'ai atteint 70% du défilement et non 100.

javascriptjqueryajaxscrollscrollbar
29
Yahoo

À condition que votre chèque en cours se déclenche lors du défilement vers le bas de la page, vous pouvez essayer quelques arithmétiques de base:

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
                                          //where 0.7 corresponds to 70% --^

Assurez-vous d'ajouter une vérification pour ne pas déclencher plusieurs demandes Ajax simultanées, si vous ne l'avez pas déjà fait.

Ceci est plutôt hors de portée de la question, mais si vous voulez un exemple de la façon d'empêcher plusieurs demandes d'être déclenchées simultanément:

Déclarez une variable globale, par exemple processing.

Incorporez-le ensuite dans votre fonction:

if (processing)
    return false;

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
    processing = true; //sets a processing AJAX request flag
    $.post("url", '<params>', function(data){ //or $.ajax, $.get, $.load etc.
        //load the content to your div
        processing = false; //resets the ajax flag once the callback concludes
    });
}

C'est un exemple simple d'utilisation d'une var pour garder une trace s'il y a une demande Ajax active pour votre fonction de défilement ou non, et cela n'interfère pas avec toute autre demande Ajax concurrente que vous pourriez avoir.

Modifier: exemple JSFiddle

Veuillez noter que l'utilisation d'un% pour mesurer la hauteur du document peut être une mauvaise idée, étant donné que la hauteur du document augmentera à chaque fois que vous chargez quelque chose, ce qui déclenchera la demande Ajax étant relativement plus éloignée du bas de la page (taille absolue sage).

Je recommanderais d'utiliser un décalage de valeur fixe pour éviter cela (200-700 environ):

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){
                                 // pixels offset from screen bottom   --^

Exemple: JSFiddle

Modifier: Pour reproduire le problème dans le premier code avec des pourcentages, chargez-y 50 divs. Lorsque vous chargez le div suivant, cela n'ajoutera que 2% à la hauteur totale du document, ce qui signifie que la prochaine requête sera déclenchée dès que vous remonterez ces 2% jusqu'à 70% de la hauteur du document. Dans mon exemple fixe, le décalage inférieur défini ne chargera le nouveau contenu que lorsque l'utilisateur se trouvera dans une plage de pixels absolus définie à partir du bas de l'écran.

85
Fabrício Matté

Une recherche rapide sur Google pour get percentage scrolled down fait apparaître cette page comme premier résultat (avec le code ci-dessous, qui fait plus ou moins ce que vous voulez). J'ai l'impression que vous n'avez fait aucune recherche avant de demander ici.

$(document).scroll(function(e){

    // grab the scroll amount and the window height
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = (scrollAmount / documentHeight) * 100;

    if(scrollPercent > 50) {
        // run a function called doSomething
       doSomething();
    }

    function doSomething() { 

        // do something when a user gets 50% of the way down my page

    }

});
11
Daedalus