Pourcentage de barre de défilement angulaire - jquery, angularjs, scroll, scrollbar, pourcentage

J'ai besoin de trouver le bénéfice de la barre de défilementdans angular.js. Ensuite, quand il atteint environ 60% pour appeler une fonction. À l’heure actuelle, j’utilise une fonction d’application appelée à partir de la directive. Le seul problème est que je ne trouve pas le pourcentage de défilement de la barre de défilement. C’est ce que j’ai eu jusqu’à présent, ça n’a pas l’air très bon ...

app.directive("whenScrolled", function($window) {

return function(scope, element, attr) {
var scrolledEl = angular.element($window);

angular.element($window).bind("scroll", function() {

var offSet = scrolledEl.offset(),
height = scrolledEl.height(),
scrolledPercentage = (offSet / height)*11;

if (scrolledPercentage >= 60) {
scope.$apply(attr.whenScrolled);
}
});
};

});

Comme vous pouvez le constater, j’ai trouvé expérimentalement que lorsqueJe multiplie ce chiffre par 11. Je reçois le pourcentage, mais cela ne fonctionne que dans quelques hauteurs d'écran. J'ai besoin d'une solution globale et plus tard, quand j'ajoute plus d'éléments au dom et que le corps se prolonge pour me donner un% correct. Des idées?

Réponses:

Vous devriez utiliser $window.pageYOffset et $window.innerHeight Leur division vous donnera une valeur comprise entre 0 et 1, donc si vous préférez une comparaison avec un pourcentage en pourcentage, multipliez simplement par 100.

Cela devrait fonctionner plus ou moins comme vous le souhaitez (remplacez simplement console.log par l'action que vous devez effectuer si le pourcentage est supérieur à 60):

  angular.element($window).bind("scroll", function() {

var offSet = $window.pageYOffset,
height = $window.innerHeight,
scrolledPercentage = (offSet / height * 100);
//console.log(scrolledPercentage);
if (scrolledPercentage >= 60) {
console.log(scrolledPercentage + " over 60");
}
});