Ng-lazyload-image: Ne fonctionne pas avec le plugin Perfect Scrollbar.

J'ai configuré une application Angular 5 rapide, cela semble bien fonctionner pour moi - https://stackblitz.com/edit/angular-9guzc4?embed=1&file=app/app.component.html

Si vos images sont dans un conteneur de défilement séparé, vous devrez utiliser scrollTarget . Veuillez vous référer à la documentation ou aux exemples de l' API .

@vugar005 , je vois que votre div externe a position: relative style position: absolute ?

@sapierens @tjoskar. Merci. Résolution du problème en ajoutant Scroll Target. Mais le plugin n'est pas compatible avec la barre de défilement parfaite.
dans 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>

La barre de défilement parfaite a été modifiée en div avec débordement automatique et cela fonctionne comme prévu, mais je souhaite conserver la barre de défilement parfaite. Donc ce que j'ai fait c'est :
Quand je console this.scroll

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

Donc, en affectant this.scroll à document.getElementById('main_content').children[0]; Le problème est entièrement résolu.
Merci pour l'aide.

Je n'ai jamais utilisé perfect-scrollbar mais je suppose que vous pourriez utiliser this.perfectScrollbar$ = Observable.fromEvent(document.getElementById('main_content'), 'ps-scroll-y') puis dans votre modèle :

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

@tjoskar Malheureusement, cela n'a pas fonctionné.
La seule solution temporaire est d'affecter scrollTarget à
document.getElementById('main_content').children[0];

Pouvez-vous créer un petit gitrepo/stackblitz/plnkr où vous pouvez reproduire le problème ?

d'accord, je vais bientôt ajouter à stackblitz et partager ici.

S'il vous plaît jeter un oeil à la démo stackblitz:
https://stackblitz.com/edit/angular-wxyi2t

J'ai réussi à le faire fonctionner comme ça - https://stackblitz.com/edit/angular-zovu45
Je ne sais pas si c'est la meilleure solution cependant.

Il est également possible de le résoudre comme @tjoskar suggéré dans https://github.com/tjoskar/ng-lazyload-image/issues/275#issuecomment -356853681, mais vous devrez utiliser perfect-scrollbar comme directive au lieu de un composant pour que cela fonctionne (https://github.com/zefoy/ngx-perfect-scrollbar#installing-and-usage sous DIRECTIVE USAGE ).

@sapierens Oui ça marche aussi. J'utilise la barre de défilement parfaite dans presque tous les projets. C'est pourquoi il était important pour moi de le faire fonctionner. Merci.