如何使用 vue-scroll答案

【问题标题】：How to use vue-scroll如何使用 vue-scroll
【发布时间】：2017-04-27 01:09:55
【问题描述】：

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

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

使用 npm 安装：

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

这不起作用的可能原因是什么。

【问题讨论】：

我认为你应该在body标签上设置v-scroll="onScroll"
@BelminBedak 我也试过了，没用。

标签： javascript css scroll vue.js vuejs2

【解决方案1】：

~~这个库似乎不是处于非常稳定的状态，我设法使用@scroll='onScroll' 或v-on:scroll='onScroll 语法使其工作。位置 arg 不好用，需要使用element.scrollTop。~~

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

已编辑

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

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

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

【讨论】：

这不起作用，我在 vue 文档中也没有找到类似的东西。
示例不起作用吗？我发布的链接对我有用，我用 vue 2.x 测试过，它也有效。
我在 vue 文档中没有找到任何关于 v-on:scroll 的内容，但是 v-on 或 @ 语法通过在当前元素中添加这个处理程序来工作，所以这将基本上在当前元素中执行addEventListener('scroll', onScroll)。也许你的元素不是 scrollable 并且你想要在窗口对象上添加事件，那么这种方法将不起作用。
是的，这也是我刚刚得出的结论，您将工作编码为div 的高度小于section，并且您获得了滚动位置，this 为我工作。
@TiagoHenriqueEngel 您的“bin”（工作示例链接）不再工作

【解决方案2】：

对于已经默认 Vue 提供的作品，无需安装包。

就我而言，@scroll 不起作用，但 v-scroll 起作用。

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

【讨论】：