Angularjs spirale infinie dans un conteneur

J'essaie d'utiliser le routage infinité angularjs. Il semble fonctionner uniquement si le défilement est relatif à la fenêtre du navigateur.

Je voudrais faire un défilement infini dans un DIV intérieur, c'est-à-dire que j'ai une page avec une enveloppe générique et une div interne pour afficher le contenu réel.

La page wrapper est configurée pour transmettre la fenêtre entière, donc elle n'est jamais défilable. Mais la division intérieure contenant du contenu, possède sa propre barre de défilement.

Comment puis-je obtenir le défilement infini pour fonctionner par rapport à la barre de défilement de contenu interne?

Dans le cas où quelqu'un cherche le même et vient ici – voici des liens utiles:

https://github.com/BinaryMuse/ngInfiniteScroll/pull/7 (demande d'extraction et discussion)

https://github.com/hlsolutions/ngInfiniteScroll/tree/scroll-on-any-lement (fourchette avec une fonctionnalité nécessaire)

https://raw.github.com/hlsolutions/ngInfiniteScroll/scroll-on-any-lement/src/infinite-scroll.coffee (source elle-même)

Vous pouvez l'utiliser de cette façon (exemple: haml):

.div-with-overflow %ul{data: {'infinite-scroll' => "getItems()", 'infinite-scroll-disabled' => 'cannotGetItems()', 'infinite-scroll-parent' => 'true'}}

Fournir un 'infinite-scroll-parent' => 'true' fera l'élément parent à utiliser pour les calculs au lieu d'une fenêtre.

Voici un exemple en HTML simple:

 <div class="content"> <div infinite-scroll="addPage()" infinite-scroll-container='".content"'> <div ng-repeat="recipe in recipes">

Deux choses ici:

Pour que la distance de défilement infinie fonctionne correctement, l'élément enfant de votre directive de défilement infini doit être les éléments que vous énumérer, de sorte que le déclencheur de distance de défilement déclenchera correctement.
La valeur du conteneur de défilement .content dans cet exemple est le nom de classe double-cité .content puis enveloppé par des guillemets simples. Si vous lisez la source, la valeur de la chaîne est finalement alimentée en document.querySelector . Vous pouvez lire la documentation à ce sujet pour voir la valeur qu'il attend.

Vous pouvez également utiliser l'assistant de infinite-scroll-parent comme @trushkevich suggéré si l'élément parent immédiat de votre directive de défilement multiple est le conteneur défilable.

Ce thread est un peu vieux, non-le-moins encore pertinent.

Comme il semble, ng-infinite-scroll fusionné dans certaines des solutions fourchues, et maintenant prend en charge les attributs suivants (non documentés):

InfiniteScrollContainer vous permet de définir le conteneur en passant par un sélecteur ou une fonction de requête ou un élément html

InfiniteScrollParent dit simplement qu'il utilise le parent comme conteneur (au lieu de $ window)

Utilisation de l'échantillon:

 <div class="scroller-companies" infinite-scroll="showMorePlaces()" infinite-scroll-parent="true">

Je suggère un autre bouclier d'infini: ui-scroll il a la caractéristique la plus fondamentale "détruire les éléments à mesure qu'ils deviennent invisibles et les recréer s'ils deviennent de nouveau visibles". – évite de créer un observateur et de vous rendre appétissante

Ouvrez le fichier ng-infinite-scroll.js et modifiez toute la référence de $ window à $ ("# my-content-container").

Remarque: une solution robuste serait d'ajouter un paramètre attr au scroll infini avec l'identifiant du conteneur.

Utilisez ce code, il n'y a pas de plugin

Dans le contrôleur, faites ce qui suit

 $(".Scrollx").scroll(function () { if ($('.Scrollx').scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { $scope.limit = $scope.limit + 5; } });

Définissez la variable limit comme vous souhaitez afficher l'exemple de première fois: $scope.limit=5