Как использовать vue-scroll

Question

У меня есть прецедент, где я хочу динамически изменять класс CSS на основе прокрутки прокрутки, который описан here.

Я думал об использовании vue-scroll для этого. Я сделал следующие изменения:

Установка с помощью НПМ:

npm install vue-scroll --save 

сделаны следующие изменения в main.js:

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

добавил следующее в одном из компонентов, где я хочу использовать его:

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

и следующие изменения в компонент:

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

Однако это не работает, я также пытался зарегистрировать это как директиву в main.js, как следующие, но это тоже не помогло.

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

Что может быть причиной этого не работает.

Answer 1

Эта библиотека, похоже, не находится в очень стабильном состоянии, мне удалось заставить ее работать, используя синтаксис @scroll='onScroll' или v-on:scroll='onScroll. Позиция arg не работает жестко, вам нужно использовать element.scrollTop.

Похоже, что документация устарела, вероятно, синтаксис, указанный в документации, относится к vue 1.x.

EDITED

На самом деле, я был укомплектовать неправильно об этом, v-on:scroll и @scroll будут обрабатываться вей сам, нет необходимости для ви улитки Lib. Листинг vue-scroll lib фактически не работает в примере, который я связал.

Я думаю, вы можете использовать вю построен в свитке, а не в vue-scroll Lib

Вы можете увидеть рабочий пример here