Charge ajax lorsque le défilement atteint 80%
J'utilise le code suivant qui fonctionne lorsque la barre de défilement atteint le fond,
if($(window).scrollTop() == $(document).height() - $(window).height()){
Je veux cependant que l'ajax soit déclenché quand j'ai atteint 70% du défilement pas 100.
2 réponses
À condition que votre vérification actuelle se déclenche lorsque vous faites défiler 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 requêtes Ajax simultanées, si vous ne l'avez pas déjà fait.
C'est plutôt hors du champ de la question, mais si vous voulez un exemple de comment empêcher plusieurs requêtes d'être déclenchées simultanément:
Déclarer une var globale, par exemple processing.
Ensuite, incorporez - le 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'un var pour garder une trace s'il y a une requête Ajax active pour votre fonction de défilement ou non, et cela n'interfère pas avec toute autre requête AJAX concurrente que vous pourriez avoir.
Modifier: jsfiddle exemple
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 chargerez quelque chose, ce qui déclenchera la requête Ajax étant relativement plus loin du bas de la page(taille absolue).
Je recommande d'utiliser un décalage de valeur fixe pour éviter cela (200-700 ou plus):
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){
// pixels offset from screen bottom --^
Exemple: JSFiddle
Edit: Pour reproduire le problème dans le premier code, avec des pourcentages, charge 50 divs en elle. Lorsque vous chargez le prochain div, il ajoutera seulement 2% à la hauteur totale du document, ce qui signifie que la requête suivante sera déclenchée dès que vous faites défiler ces 2% vers les 70% du document de hauteur. Dans mon exemple fixe, le décalage du bas défini chargera le nouveau contenu uniquement lorsque l'utilisateur se trouve à une plage de pixels absolus définie à partir du bas de l'écran.
Une recherche rapide sur google pour get percentage scrolled down fait apparaître cette page {[4] } 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 pas tenté de 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
}
});