How to track page scroll for only one vue component that keeps state (keep-alive)?

Question

Vue.js

There is a vue component with articles. It has a keep-alive state . When scrolling to the end of the page, articles are automatically loaded from the database. The EventListener is responsible for this:

created() {
    // load the data initially
    this.fetchData();
    window.addEventListener('scroll', this.handleScroll);
},

The method looks like this:

handleScroll() {
    if ((!this.EndOfDataBase) && ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 50) && (!this.l
oading)) {
        this.fetchDataNext()
    }
},

The component is also written to remove the "EventListener", but since the component retains its state (keep-alive), this method does not remove the "scroll listener".

destroyed() {
            window.removeEventListener('scroll', this.handleScroll);
        }

The problem arises if you open a page with this component, then open another component through vue-router (SPA application), and when the page is scrolled down , the handleScroll () method of the other component also fires . How can I set scroll tracking to only be in one specific component?

Answer 1

The component is also written to remove the "EventListener", but since the component retains its state (keep-alive), this method does not remove the "scroll listener".

As the documentation suggests , activated and deactivated hooks are available for keep-alive components - try to hang and remove the scroll handler in them.