javascript - 如何使用vue-scroll

Question

我有一个用例，我想根据滚动位置动态更改 CSS 类，描述为 here .

我正在考虑使用 vue-scroll为了这。我做了以下更改:

使用 npm 安装:

npm install vue-scroll --save

在 ma​​in.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
    }
},

但是这不起作用，我也尝试将其注册为 ma​​in.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 语法。 position arg 不好用，你需要使用 element.scrollTop。

看起来文档已经过时了，文档中显示的语法可能是关于 vue 1.x 的。

已编辑

实际上，我完全错了，v-on:scroll 和 @scroll 将由 vue 本身处理，不需要 vue-scroll 库。 vue-scroll 库实际上在我链接的示例中不起作用。

我想你可以使用 vue 的内置滚动而不是 vue-scroll 库

您可以看到一个工作示例(已删除技术支持诈骗链接)