Comment utiliser vue-scroll

J'ai un cas d'utilisation où je souhaite modifier la classe CSS de manière dynamique en fonction de la position de défilement, qui est décrit ici .

Je pensais utiliser la vue-scroll pour cela. J'ai fait les changements suivants:

Installation en utilisant npm:

npm install vue-scroll --save 

Effectué les modifications suivantes dans main.js :

• W3Schools Try-it Editor
• Comment suivre. Position animale gauche
• Comment faire un mouvement infini d'une div?
• Accès aux classes CSS dans un fichier css, cross-domain, en javascript
• Bootstrap modal rend la barre de défilement disparue après la fermeture

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

Ajouté dans l'un des composants, où je veux l'utiliser:

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

Et suite aux modifications apportées au composant:

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

Cependant, cela ne fonctionne pas, j'ai également essayé de l'enregistrer comme une directive dans main.js , comme la suite, mais cela n'a pas non plus aidé.

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

Ce qui peut être possible parce que cela ne fonctionne pas.

• Internet Explorer 8 dans Windows XP
• NgAnimate L'animation CSS ne fonctionne pas avec ng-show & ng-hide
• Comment ajouter une classe CSS à un élément en cliquant – Réagir
• Vérifiez si le contenu évolue
• Comment détecter IE / Edge en utilisant javascript?