Scroll handlers being removed after being called once?

[aliakhtar]

Hi there,

I'm working on an infinite scroller using this library, where more content is loaded once you scroll to the bottom. Great library, btw, it works perfectly on both desktop and phone, and was painless to setup.

But, I'm noticing an issue where my scroll handler is called once on first being created, then once when you actually scroll to the bottom, but then it never gets called again and more content isn't loaded.

I dug through the code, and in node_modules/when-in-viewport/src/whenInViewport.js, commenting out the following function:

removeItem: function(registryItem) {

            delete this.store[registryItem.storeKey];

        },

fixed the issue. So it looks like each time when the callback is triggered, the event itself is removed from the registry so it isn't triggered again.

Any ideas why this is? I'm happy to submit a pull with a fix if needed.

I installed using npm install as per your documentation, and I'm using this in a vue-js project, via:

import WhenInViewPort from 'when-in-viewport'
this.viewPortHandler = new WhenInViewPort(this.$el, this.handleScroll)

[aliakhtar]

It looks like the issue is the removeItem callback in processItem:

processItem: function(item) {

            if (scrollOffset + windowHeight >= item.topOffset - item.threshold) {

                //this.removeItem(item);
                item.callback.call(item.context || window, item.element);

            }

        },

I don't know why it would be calling to remove the callback, but this should be optional behavior IMO, you should manually call stopListening() to remove the callback. It shouldn't get removed automatically / silently.