Ng-lazyload-image: परफेक्ट स्क्रॉलबार प्लगइन के साथ काम नहीं करता है।

मैंने एक त्वरित कोणीय 5 ऐप सेट किया है, मेरे लिए ठीक काम कर रहा है - https://stackblitz.com/edit/angular-9guzc4?embed=1&file=app/app.component.html

यदि आपकी छवियां एक अलग स्क्रॉल कंटेनर में हैं, तो आपको scrollTarget । कृपया एपीआई दस्तावेज या उदाहरण देखें ।

@ vugar005 , मैं देख रहा हूं कि आपके बाहरी डिव में position: relative -स्टाइल है। क्या आपके पास इस div और विंडो के बीच position: absolute साथ एक आवरण है?

@sapierens @tjoskar। धन्यवाद। स्क्रॉल लक्ष्य जोड़कर समस्या का समाधान किया। लेकिन प्लगइन सही स्क्रॉलबार के साथ संगत नहीं है।
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>

अतिप्रवाह ऑटो के साथ सही स्क्रॉलबार को div में बदल दिया और यह अपेक्षा के अनुरूप काम करता है लेकिन मैं सही स्क्रॉलबार रखना चाहता हूं। तो मैंने जो किया वह है:
जब मैं इसे सांत्वना देता हूं। स्क्रॉल करें

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

तो यह असाइन करके.scroll को document.getElementById('main_content').child[0]; समस्या पूरी तरह से हल हो गई है।
मदद के लिए धन्यवाद।

मैंने कभी भी perfect-scrollbar उपयोग नहीं किया है, लेकिन मुझे लगता है कि आप this.perfectScrollbar$ = Observable.fromEvent(document.getElementById('main_content'), 'ps-scroll-y') उपयोग कर सकते हैं और फिर अपने टेम्पलेट में:

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

@tjoskar दुर्भाग्य से यह काम नहीं किया।
स्क्रॉलटार्गेट को असाइन करना एकमात्र अस्थायी समाधान है
document.getElementById('main_content').children[0];

क्या आप एक छोटा gitrepo/stackblitz/plnkr बना सकते हैं जहाँ आप समस्या को पुन: उत्पन्न कर सकते हैं?

ठीक है, मैं जल्द ही स्टैकब्लिट्ज में जोड़ूंगा और यहां साझा करूंगा।

कृपया स्टैकब्लिट्ज डेमो पर एक नज़र डालें:
https://stackblitz.com/edit/angular-wxyi2t

मैं इसे इस तरह काम करने में कामयाब रहा - https://stackblitz.com/edit/angular-zovu45
मुझे यकीन नहीं है कि यह सबसे अच्छा समाधान है, हालांकि।

इसे https://github.com/tjoskar/ng-lazyload-image/issues/275#issuecomment -356853681 में सुझाए गए @tjoskar की तरह हल करना भी संभव है, लेकिन आपको इसके बजाय एक निर्देश के रूप में परफेक्ट-स्क्रॉलबार का उपयोग करना होगा इसके काम करने के लिए एक घटक (https://github.com/zefoy/ngx-perfect-scrollbar#installing-and-usage प्रत्यक्ष उपयोग के तहत)।

@sapierens हाँ यह भी काम करता है। मैं लगभग हर प्रोजेक्ट में परफेक्ट स्क्रॉलबार का इस्तेमाल करता हूं। इसलिए मेरे लिए यह काम करने के लिए आयात था।धन्यवाद।