I am using VueScroll as a container for a carousel. Unfortunately I noticed that when a user has their mouse on the VueScroll element and wheel-scrolls the elements inside the VueScroll to zoom in/out. I am wanting to get the element and add a listener to handle the wheel scroll event.

To get the element I tried the following:

created(){
    if(process.client){
      if(document.getElementById('vueScroller')){
            console.log('vueScroller created');
        } else {
          console.log('fail...') 
        }
    }
  },

And I noticed that on the initial load I get "fail..." but if I change something in the code and the app hotreloads I get "vueScroller created", so I figure I am close but not understanding where I am going wrong and/or why it acts differently depending on what triggers the page to load.

I am using VueScroll as a container for a carousel. Unfortunately I noticed that when a user has their mouse on the VueScroll element and wheel-scrolls the elements inside the VueScroll to zoom in/out. I am wanting to get the element and add a listener to handle the wheel scroll event.

To get the element I tried the following:

created(){
    if(process.client){
      if(document.getElementById('vueScroller')){
            console.log('vueScroller created');
        } else {
          console.log('fail...') 
        }
    }
  },

And I noticed that on the initial load I get "fail..." but if I change something in the code and the app hotreloads I get "vueScroller created", so I figure I am close but not understanding where I am going wrong and/or why it acts differently depending on what triggers the page to load.

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow edited Nov 16, 2019 at 23:22 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Nov 5, 2019 at 16:48 av0000av0000 1,96766 gold badges3434 silver badges5555 bronze badges 1

• 2 Use a ref instead of a DOM lookup – Chase DeAnda Commented Nov 5, 2019 at 23:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

If you use created() the template has not yet been rendered. Using beforeMount() or mounted() should fix your problem.

Have a look at the life cycle diagram for reference: https://v2.vuejs/v2/guide/instance.html#Lifecycle-Diagram