search

orizens / ngx-infinite-scroll

Infinite Scroll Directive for Angular
https://www.npmjs.com/package/ngx-infinite-scroll
MIT License
1.23k stars 223 forks source link

ngx-infinite-scroll {resolveContainerElement()}: selector for #380

Closed dougse closed 2 months ago

dougse commented 3 years ago

With version 8.0.2, I encounter:

Error: ngx-infinite-scroll {resolveContainerElement()}: selector for at resolveContainerElement (ngx-ins-utils.ts:18) at createScroller (scroll-register.ts:16) at infinite-scroll.directive.ts:66 at ZoneDelegate.invoke (zone.js:386) at Zone.run (zone.js:143) at NgZone.runOutsideAngular (core.js:28464) at InfiniteScrollDirective.setup (infinite-scroll.directive.ts:65) at InfiniteScrollDirective.ngAfterViewInit (infinite-scroll.directive.ts:44) at callHook (core.js:2521) at callHooks (core.js:2492)

Which then results in angular failing to render the page and/or some repositioning issues.

Tips please - Thanks

meyer20 commented 3 years ago

I'm having this problem when running the tests.

"jest": "^26.6.3",

My implementation:

<div class="card-columns"
     infiniteScroll
     [infiniteScrollDistance]="1"
     [infiniteScrollThrottle]="50"
     (scrolled)="onScroll()"
     [infiniteScrollContainer]="'.parent-container'"
     [fromRoot]="true"
     [hidden]="isLoading">
</div>
DavidPrata commented 2 years ago

core.js:6210 ERROR Error: ngx-infinite-scroll {resolveContainerElement()}: selector for at resolveContainerElement (ngx-infinite-scroll.js:30) at createScroller (ngx-infinite-scroll.js:524) at ngx-infinite-scroll.js:676 at ZoneDelegate.invoke (zone-evergreen.js:364) at Zone.run (zone-evergreen.js:123) at NgZone.runOutsideAngular (core.js:28520) at InfiniteScrollDirective.setup (ngx-infinite-scroll.js:672) at InfiniteScrollDirective.ngAfterViewInit (ngx-infinite-scroll.js:643) at callHook (core.js:2573) at callHooks (core.js:2542)

<div class="search-results" *ngIf="displays$ | async" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50" [infiniteScrollContainer]="'.search-results'" (scrolled)="onScroll($event)">

I have a main container, i open a side right bar... and inside that right bar i want the scroll. But the issue is... the data is loaded with the main container scroll.

Can anybody help?

osamamalik2000 commented 1 year ago

What I found is that it is somehow not able to find [infiniteScrollContainer]="'.parent-container'" so it is throwing this error. I somehow managed to use scroll without this function.

mahdizarei0614 commented 1 year ago

You can pass the ElementRef type to infiniteScrollContainer:

<div #containerRef style="height: 100vh; overflow-y: auto;">
  <div infiniteScroll
       [infiniteScrollDistance]="2"
       [infiniteScrollThrottle]="50"
       [infiniteScrollContainer]="containerRef">
  </div>
</div>
nirajdgrooar commented 1 year ago

You can pass the ElementRef type to infiniteScrollContainer:

<div #containerRef style="height: 100vh; overflow-y: auto;">
  <div infiniteScroll
       [infiniteScrollDistance]="2"
       [infiniteScrollThrottle]="50"
       [infiniteScrollContainer]="containerRef">
  </div>
</div>
  • Notice that in the container element height must be fixed and the overflow must be set to auto or scroll.

This worked for me Thanks a lot