Vue cancels the addEventListener of a div ("scroll")

< H2 > listens to the scroll bar of a div in Vue (nav changes color when greater than 200, transparent when less than 200), and then doesn"t work when it jumps to another route and comes back. The problem is that I also logged off monitoring when I left the current route, you look at the code, will reply, will not help to ask, thank you bosses, urgent. Or there is a better way to implement it. This monitoring is really a pit < / H2 >.
mounted(){
    //
    this.scrollDiv = document.getElementsByClassName("myNav")[0];
    //
    this.scrollDiv.addEventListener("scroll",this.scrollFunction,{ passive: false });
},
beforeRouteLeave(to, from, next){//
        this.scrollDiv.removeEventListener("scroll",this.scrollFunction,{ passive: false });
        next();
    }

what"s wrong with this code? it has no effect at all

Nov.29,2021

Why not try it in the beforeDestroy () lifecycle


this 
beforeDestroy() {
    this.scrollDiv.removeEventListener('scroll',() => this.scrollFunction(),{ passive: false });
}

temporary treatment is to write the component in keep-alive, and detect that the (removeEventListener) can be adjusted again. In order to standardize and affect other pages, it is best to log out,

.
Menu