javascript - dxo - devextreme documentation

scroll infinito angularjs en contenedor

Question

Estoy tratando de usar el desplazamiento infinito de angularjs Parece que funciona solo si el desplazamiento es relativo a la ventana del navegador.

Me gustaría hacer scroll infinito en un DIV interno, es decir, tengo una página con un contenedor genérico y un div interno para mostrar el contenido real.

La página de envoltura se establece para que transcurra toda la ventana, por lo que nunca se puede desplazar. pero el div interno que contiene contenido, tiene su propia barra de desplazamiento.

¿Cómo puedo obtener el desplazamiento infinito para trabajar en relación con la barra de desplazamiento de div de contenido interno?

Answer 1

Abra el archivo ng-infinite-scroll.js y cambie toda la referencia de $ window a $ ("# my-content-container").

Observación: una solución robusta sería agregar un parámetro attr al desplazamiento infinito con el id del contenedor.

Answer 2

Aquí hay un ejemplo en HTML simple:

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

Dos trampas aquí:

1. Para que la distancia de desplazamiento infinita funcione correctamente, el elemento hijo de su directiva de desplazamiento infinito tiene que ser los elementos que está enumerando, por lo que el disparador de distancia de desplazamiento disparará correctamente.
2. El valor de infinite-scroll-container en este ejemplo es double- .content class name .content luego está envuelto por comillas simples. Si lee la fuente, el valor de la cadena finalmente se alimenta a document.querySelector . Puede leer la documentación sobre eso para ver qué valor espera.

También puedes usar el helper infinite-scroll-parent como @trushkevich sugirió si el elemento primario inmediato de tu directiva infinite-scroll es el contenedor desplazable.

Answer 3

En caso de que alguien busque lo mismo y venga aquí, aquí hay enlaces útiles:

https://github.com/BinaryMuse/ngInfiniteScroll/pull/7 (solicitud de extracción y discusión)

https://github.com/hlsolutions/ngInfiniteScroll/tree/scroll-on-any-lement (fork con la funcionalidad necesaria)

https://raw.github.com/hlsolutions/ngInfiniteScroll/scroll-on-any-lement/src/infinite-scroll.coffee (fuente en sí)

Puedes usarlo de esta manera (el ejemplo está en haml):

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

Proporcionar un ''infinite-scroll-parent'' => ''true'' hará que el elemento padre se use para los cálculos en lugar de una ventana.

Answer 4

Este hilo es un poco viejo, no obstante, sigue siendo relevante.

Como parece, ng-infinite-scroll se fusionó en algunas de las soluciones bifurcadas y ahora admite los siguientes atributos (no documentados):

infiniteScrollContainer le permite configurar el contenedor pasando un selector o función de consulta o elemento html

infiniteScrollParent simplemente le dice que use el padre como contenedor (en lugar de $ window)

Uso de muestra:

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

Answer 5

Sugiero otro desplazamiento infinito: ui-scroll tiene la característica más fundamental "destruir elementos a medida que se vuelven invisibles y recrearlos si vuelven a ser visibles". - Evita la creación de vigilantes y hace que tu aplicación sea lenta

Answer 6

utiliza este código, no hay ningún complemento

en el controlador haga lo siguiente

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

Establezca la variable de limit como quiera mostrar ejemplo por primera vez: $scope.limit=5