Ng-lazyload-image: No funciona con el complemento Perfect Scrollbar.

Configuré una aplicación rápida de Angular 5, parece que funciona bien para mí: https://stackblitz.com/edit/angular-9guzc4?embed=1&file=app/app.component.html

Si sus imágenes están en un contenedor de desplazamiento separado, deberá usar scrollTarget . Consulte la documentación o los ejemplos de la API .

@ vugar005 , veo que su div externo tiene position: relative -style. ¿Tiene un contenedor entre este div y la ventana con position: absolute ?

@sapierens @tjoskar. Gracias. Resolvió el problema agregando Scroll Target. Pero el complemento no es compatible con la barra de desplazamiento perfecta.
en TS
this.scroll = document.getElementById('main_content');

<perfect-scrollbar id="main_content">
  <div class="content d-flex flex-wrap"  style="position: relative"  #sc>
         <div class="brick" *ngFor="let employee of employees">
           <div class="employeeBox animated zoomIn " [routerLink]="['/employees', employee.id]">
             <div class="employeePhoto">
               <img    [defaultImage]="'assets/icons/user.svg'"
                       [lazyLoad]="employee.imgUrl"
                       [useSrcset]="true"
                       [scrollTarget]="scroll"
               >
             </div>
             <div class="employeeInfo">
               <p>{{employee.name}}</p>
             </div>
           </div>
         </div>
       </div>
</perfect-scrollbar>

Cambié la barra de desplazamiento perfecta a div con desbordamiento automático y funciona como se esperaba, pero quiero mantener la barra de desplazamiento perfecta. Entonces lo que hice fue:
Cuando consuelo this.scroll

<perfect-scrollbar id="main_content"  >
   <div style="position:static"  class="ps" ng-reflect-disabled=false> ... </div>
</perfect-scrollbar>

Entonces, asignando this.scroll a document.getElementById ('main_content'). Children [0]; El problema está completamente resuelto.
Gracias por la ayuda.

Nunca he usado perfect-scrollbar pero supongo que podrías usar this.perfectScrollbar$ = Observable.fromEvent(document.getElementById('main_content'), 'ps-scroll-y') y luego en tu plantilla:

<img [defaultImage]="'assets/icons/user.svg'"
     [lazyLoad]="employee.imgUrl"
     [useSrcset]="true"
     [scrollObservable]="perfectScrollbar$">

@tjoskar Desafortunadamente, eso no funcionó.
La única solución temporal es asignar scrollTarget a
document.getElementById('main_content').children[0];

¿Puedes crear un pequeño gitrepo / stackblitz / plnkr donde puedas reproducir el problema?

bien, lo agregaré a stackblitz pronto y lo compartiré aquí.

Por favor, eche un vistazo a la demostración de stackblitz:
https://stackblitz.com/edit/angular-wxyi2t

Logré que funcionara así: https://stackblitz.com/edit/angular-zovu45
Sin embargo, no estoy seguro de si esa es la mejor solución.

También es posible resolverlo como @tjoskar sugirió en https://github.com/tjoskar/ng-lazyload-image/issues/275#issuecomment -356853681, pero tendrías que usar perfect-scrollbar como directiva en lugar de un componente para que funcione (https://github.com/zefoy/ngx-perfect-scrollbar#installing-and-usage bajo DIRECTIVA DE USO ).

@sapierens Sí, también funciona. Utilizo la barra de desplazamiento perfecta en casi todos los proyectos. Por eso fue importante para mí hacerlo funcionar. Gracias.