How to Listen to the Window Scroll Event in a Vuejs Component

How to listen to the window scroll event in a VueJS component?

Actually I found a solution. I add an event listener on the scroll event when the component is created and remove the event listener when the component is destroyed.

export default {
  created () {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll (event) {
      // Any code to be executed when the window is scrolled
    }
  }
}

Hope this helps!

How can I listen to the scroll event in a sidebar [Bootstrap Vue]

Your scroll listener fires on the main window because the directive attached the event listener to window, and not the element.

To listen to scroll events on the contents of b-sidebar, the listener should be on an element inside the default slot of b-sidebar (not the b-sidebar itself).

1. Put a wrapper div inside b-sidebar's default slot, and style it to enable scrolling:

   <template>
     <b-sidebar>
       <div class="wrapper">
         <!-- your actual contents here -->
       </div>
     </b-sidebar>
   </template>
   
   <style>
   .wrapper {
     overflow: auto;
     height: 100%;
   }
   </style>
   

2. Add the custom v-scroll directive on the wrapper div:

   <div class="wrapper" v-scroll="handleScroll">
   

3. Update the custom directive to add the binding value as the event listener on the given element's scroll event:

   Vue.directive('scroll', (el, binding) => {
     let f = (evt) => {
       if (binding.value(evt, el)) {
         el.removeEventListener('scroll', f)
       }
     }
   
     el.addEventListener('scroll', f)
   })
   

demo

Watch window.scrollY changes in Vuejs

window properties can't be used reactively like that. Instead, you'd have to listen to the window's scroll event and respond accordingly:

mounted() {
  window.addEventListener("scroll", this.onScroll)
},
beforeDestroy() {
  window.removeEventListener("scroll", this.onScroll)
},
methods: {
  onScroll(e) {
    this.windowTop = window.top.scrollY /* or: e.target.documentElement.scrollTop */
  }
}

Vue.js: how to react to page scrolling?

There is a good suggestion here: https://github.com/vuejs/Discussion/issues/324#issuecomment-240978025

I duplicate the code here for posterity.

data () {
  return {
    scrolled: false
  };
},
methods: {
  handleScroll () {
    this.scrolled = window.scrollY > 0;
  }
},
created () {
  window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll);
}

How to listen to scroll events in vue nuxtjs?

Using window or any other browser-specific API in created or beforeCreate will lead to problems because platform-specific APIs like document or window are not available on the server (where SSR happens). Instead, move the logic from created into beforeMount. Leaving it in created and checking it via process.browser would work as well but is not as clean and can lead to confusion easily.

export default {
  methods: {
    handleScroll () {
      // Your scroll handling here
      console.log(window.scrollY)
    }
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}

Only created and beforeCreate are executed on both sides, server and client. Therefore you don't need guarding ifs in beforeMount or beforeDestroy.

Further read about ssr-ready Vue components

Detect scroll on tbody in vue

Added @scroll to my <div class="table-responsive" @scroll='handleScroll'> which worked

---

Related Topics