How to use vue-scroll

Question

I have a use-case where I want to change CSS class dynamically based on scroll postiion, which is described here.

I was thinking of using vue-scroll for this. I made following changes:

Installing using npm:

npm install vue-scroll --save

made following changes in main.js:

import Vue from 'vue'
import vScroll from 'vue-scroll'
Vue.use(vScroll)

added following in one of the component, where I want to use it:

<div  v-scroll="onScroll">
   ...
   ...
   <p>scrollTop:<span>{{position &&  position.scrollTop}}</span></p>
   ...
   ...
</div>

and following changes in the component:

export default {
  data () {
    return {
      position: null
    }
  },
 methods: {
    onScroll (e, position) {
      console.log('comes here ' + position)
      this.position = position
    }
},

However this is not working, I also tried to register this as a directive in main.js, like following, but this also did not help.

const app = new Vue({
  router,
  store,
  el: '#app',
  template: '<App/>',
  components: { App }, // Object spread copying everything from App.vue
  directives: {
    'v-scroll': vScroll  // tried 'vScroll': vScroll as well
  }
})

What can be possible reason of this not working.

Solution

This lib doesn't seems to be in a very stable state, I managed to make it work using the @scroll='onScroll' or v-on:scroll='onScroll syntax. The position arg don't work tough, you need to use element.scrollTop.

It looks like the documentation is outdated, probably the syntax shown in the documentation is regarding vue 1.x.

EDITED

Actually, I was completly wrong about this, v-on:scroll and @scroll will be handled by vue itself, no need for the vue-scroll lib. The vue-scroll lib is actually not working in the example I linked.

I guess you can use vue's built in scroll instead of the vue-scroll lib

You can see a working example (tech support scam link removed)