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 ponent, where I want to use it:

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

and following changes in the ponent:

export default {
  data () {
    return {
      position: null
    }
  },
 methods: {
    onScroll (e, position) {
      console.log('es 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/>',
  ponents: { 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.

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 ponent, where I want to use it:

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

and following changes in the ponent:

export default {
  data () {
    return {
      position: null
    }
  },
 methods: {
    onScroll (e, position) {
      console.log('es 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/>',
  ponents: { 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.

• javascript
• css
• scroll
• vue.js
• vuejs2

• I think you should set v-scroll="onScroll" on body tag – Belmin Bedak Commented Dec 12, 2016 at 8:23
• @BelminBedak I tried that as well, didn't help. – Saurabh Commented Dec 12, 2016 at 8:35

2 Answers 2

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 pletly 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)

There is no need of instaling a package for a work which is already Vue provides by default.

In my case, @scroll didn't work but v-scroll did.

<div  v-scroll="onScroll">
<!-- stuff -->
</div>