CODEWITHSUNDEEP
javascriptcssscrollvue.jsvuejs2
Saurabh
Saurabh

Reputation: 73669

How to use vue-scroll

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.

Upvotes: 3

Views: 16199

Answers (2)

Debu Shinobi
Debu Shinobi

Reputation: 2582

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>

Upvotes: 0

Tiago Engel
Tiago Engel

Reputation: 3661

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)

Upvotes: 3

Related Questions