angularjs scroll infinito em um container

Estou tentando usar angularjs scroll infinito Parece funcionar apenas se o scroll for relativo à janela do navegador.

Eu gostaria de fazer scroll infinito em um DIV interno, ou seja, eu tenho uma página com um wrapper genérico e uma div interna para exibir o conteúdo real.

A página do wrapper é configurada para passar a janela inteira, portanto, nunca é rolável. mas a div interna que contém conteúdo tem sua própria barra de rolagem.

Como faço para que a rolagem infinita funcione em relação à barra de rolagem div do conteúdo interno?

No caso de alguém pesquisar o mesmo e vir aqui – aqui estão os links úteis:

https://github.com/BinaryMuse/ngInfiniteScroll/pull/7 (solicitação pull e discussão)

https://github.com/hlsolutions/ngInfiniteScroll/tree/scroll-on-any-lement (fork com funcionalidade necessária)

https://raw.github.com/hlsolutions/ngInfiniteScroll/scroll-on-any-lement/src/infinite-scroll.coffee (fonte em si)

Você pode usá-lo desta maneira (o exemplo está em haml):

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

Fornecer um 'infinite-scroll-parent' => 'true' fará com que o elemento pai seja usado para cálculos em vez de uma janela.

Aqui está um exemplo em HTML simples:

 

Duas pegadinhas aqui:

  1. Para que a distância de rolagem infinita funcione corretamente, o elemento filho de sua diretiva de rolagem infinita precisa ser os elementos que você está enumerando, portanto, o acionador de distância de rolagem será acionado corretamente.
  2. O valor de infinite-scroll-container, neste exemplo, é o nome da class com aspas duplas .content , em seguida, .content por aspas simples. Se você ler a origem, o valor da string será alimentado no document.querySelector . Você pode ler a documentação sobre isso para ver qual valor ela espera.

Você também pode usar o auxiliar infinite-scroll-parent como @trushkevich sugerido se o elemento pai imediato de sua diretiva de rolagem infinita for o contêiner rolável.

Este segmento é um pouco antigo, não-menos ainda relevante.

Ao que parece, o ng-infinite-scroll foi mesclado em algumas das soluções bifurcadas e agora suporta os seguintes atributos (não documentados):

infiniteScrollContainer permite definir o contêiner passando em um seletor de consulta ou function ou elemento html

infiniteScrollParent simplesmente diz para usar o pai como o container (em vez de $ window)

Uso da amostra:

 

Eu estou sugerindo outro pergaminho infinito: ui-scroll ele tem a característica mais fundamental de “destruir elementos à medida que eles se tornam invisíveis e recriá-los se eles se tornarem visíveis novamente”. – evita criar observador e tornar você lento

Abra o arquivo ng-infinite-scroll.js e altere toda a referência de $ window para $ (“# my-content-container”).

Observação: uma solução robusta seria adicionar um parâmetro attr à rolagem infinita com o ID do contêiner.

use este código não existe plugin

no controlador faça o seguinte

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

Defina a variável de limit como você deseja exibir pela primeira vez exemplo: $scope.limit=5