Does this need to have the dependencies? ember-cli-babel and ember-cli-htmlbars?

Modifiers make it easy to get access to an element's reference, so it would be nice if those could be passed in as well, instead of having to add a class / data attribute purely to find the element in the dom.

Description

There is no information given on testing of the InfiniteScroller component in the description.

Going to the new route. Shows "Cannot read property 'scrollTop' of undefined". Is there any way to destroy component while transition to new route?

before scroll this flag is undefined after I start scrolling it is always false

If a user drags their browser window larger, then a "load more" button may not be displayed.
It would be nice if the scroller.isScrollable is updated on a window resize event.

Ember 3.14.2
Infinite scroll 6.0.2

It seems, that your plugin forces a rerender, when evaluating the scroll position on the 'did-insert' event. I tried to debounce it with Ember.run.later inside handleInsertElement which seems to remove the forced rerender but keep the initial behaviour.

Hi. Thanks for this ember add-on. I'm having difficulty using it in conjunction with bootstrap scroll-spy. Here is my template markup.

 <div class="scroll-watcher" data-spy="scroll" data-target="list-group">    
            <div class="list-group">
            {{#infinite-scroller on-load-more=(action 'nextPage') as |scroller|}}
                {{#each model as |material|}}
                        {{#link-to "materials.detail" material class="list-group-item"}}
                                <span class="badge">{{material.code}}</span>
                                <h4 class="list-group-item-heading">{{material.name}}</h4>
                                <p class="list-group-item-text">
                                    {{material.category.value}}
                                </p>
                        {{/link-to}}
                {{/each}}
            {{/infinite-scroller}}
            </div>     
        </div>

The nextPage action is not triggered when I reach the bottom of the scroll box. I know my controller action setup is working fine when I set use-document=true and scroll to the bottom of the page the action triggers correctly. I need to get it working on my bootstrap scroll box though? Is this an issue or have I just done something silly.

Lately I've been getting the following error:

ReferenceError: document is not defined
    at Module.callback (/Users/mhluska/project/tmp/broccoli_persistent_filterreplace_filter-output
_path-SkDKJc9B.tmp/assets/addon-tree-output/@zestia/ember-simple-infinite-scroller/services/-infinite-scroller.js:8:1)

Would it be possible to support FastBoot by not referencing document if typeof FastBoot !== 'undefined'?

Is there a way to import the component and extend it?

I tried something like this and no luck:

import EmberSimpleInfiniteScroller from '@zestia/ember-simple-infinite-scroller';

The line {{log scroller}} below produces the following in dev tools on the first call:
EmptyObject {error: null, isScrollable: undefined, isLoading: false, loadMore: ƒ}
and this on each additional call:
EmptyObject {error: null, isScrollable: false, isLoading: false, loadMore: ƒ}

My action 'loadMore' is on my controller and updates my model after making a new fetch.

{{#infinite-scroller useDocument=true onLoadMore=(action "loadMore") as |scroller|}} 
  {{#each model.groupedPosts as |group index|}}
    {{blog/post-card group=group index=index length=postsLength}}
  {{/each}}
  {{log scroller}}
  {{#if scroller.isLoading}}
    <script>
      document.body.style.background = "red";
    </script>
  {{/if}}
{{/infinite-scroller}}

When using the infinite-scroller component with use-document=false and padding .infinite-scroller: { padding: 15px; }, on-load-more is not fired. It's because the height returned by _scrollerHeight is not taking into account padding. A way to fix it is just to use jQuery's outerHeight function like so:

// addon/components/infinite-scroller.js

_scrollerHeight() {
  if (this.getAttr('use-document')) {
    return this.get('_infiniteScroller').$window().outerHeight();
  } else {
    return this.$scroller().outerHeight();
  }
}