search

apertureless / vue-parallax

🌌 Vue.js component for parallax image scroll effects
MIT License
638 stars 88 forks source link

Component doesn't clean up after itself #19

Closed adambullmer closed 7 years ago

adambullmer commented 7 years ago

Expected Behavior

If I am on a page with the parallax component on it, navigate to a new page in the app, I expect the scroll event listener to no longer fire.

Actual Behavior

When I visit a page with the parallax element, and then navigate to another page without it, when I scroll, I get bombarded with console errors. I source dived a little and found that there isn't a defined cleanup for this component, like turning off the scroll event listener.

vue-parallaxy.min.js?ab81:1 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at VueComponent.isInView (vue-parallaxy.min.js?ab81:1)
    at VueComponent.boundFn [as isInView] (vue.esm.js?65d7:182)
    at eval (vue-parallaxy.min.js?ab81:1)
isInView @ vue-parallaxy.min.js?ab81:1
boundFn @ vue.esm.js?65d7:182
(anonymous) @ vue-parallaxy.min.js?ab81:1
requestAnimationFrame (async)
scrollHandler @ vue-parallaxy.min.js?ab81:1
boundFn @ vue.esm.js?65d7:182

Environment

damtsnkff commented 5 years ago

I believe I still have the issue. (Maybe linked to the fact that I had multiples instances on the same page ?)

I think you should also assign your requestAnimationFrame to a variable so that you can call cancelAnimationFrame to clean up the component entirely.

I believe the right place would be below that line: https://github.com/apertureless/vue-parallax/blob/2f131f2ab51341d82adf8f9cb138ee0f8c56d16e/src/components/Parallax.vue#L127