web-dev-qa-db-fra.com

angularjs infinite scroll dans un conteneur

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

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

La page wrapper est configurée pour couvrir toute la fenêtre, elle ne défile donc jamais . Mais la div interne qui contient du contenu possède sa propre barre de défilement.

Comment obtenir le défilement infini au travail par rapport au contenu intérieur div scrollbar?

javascriptangularjsinfinite-scrollnginfinitescroll
35
Elia Weiss

Si quelqu'un cherche la même chose 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 (fourche avec la 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 (l'exemple est en haml):

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

Si vous fournissez un 'infinite-scroll-parent' => 'true', l'élément parent sera utilisé pour les calculs au lieu d'une fenêtre.

28
trushkevich

Voici un exemple en HTML simple:

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

Deux pièges ici:

  1. Pour que distance de défilement infini fonctionne correctement, l'élément enfant de votre directive de défilement infini doit être constitué des éléments énumérés, de sorte que le déclencheur de distance de défilement se déclenche correctement.
  2. La valeur de infinite-scroll-container dans cet exemple est le nom de classe entre guillemets .content, suivi de guillemets simples. Si vous lisez le source, la valeur de chaîne finit par être introduite dans document.querySelector. Vous pouvez lire la documentation à ce sujet pour voir quelle valeur il attend.

Vous pouvez également utiliser le infinite-scroll-parenthelper comme suggéré par @trushkevich si l'élément parent immédiat de votre directive infinite-scroll est le conteneur scrollable.

17
jtlai

Ce fil est un peu vieux, pas moins le moins pertinent.

Il semble que ng-infinite-scroll ait fusionné avec certaines des solutions forkées et supporte désormais les attributs suivants (non documentés):

infiniteScrollContainer vous permet de définir le conteneur en transmettant un sélecteur de requête, une fonction ou un élément html

infiniteScrollParent lui dit simplement d'utiliser le parent comme conteneur (au lieu de $ window)

Exemple d'utilisation:

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

Je suggère un autre parchemin à l'infini: ui-scroll il a la caractéristique la plus fondamentale "de détruire les éléments lorsqu'ils deviennent invisibles et de les recréer s'ils redeviennent visibles." - évite de créer Watcher et de rendre votre application lente

6
Endless

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

Remarque: une solution robuste consisterait à ajouter un paramètre attr au défilement infini avec l'identifiant du conteneur. 

3
Elia Weiss

utiliser ce code il n'y a pas de plugin 

dans le contrôleur faire 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 pour la première fois Exemple: $scope.limit=5 

1
Raja