如何在 Vue 中创建自定义滚动事件

Question

在 Vue 中处理滚动 自定义指令 。下面是一个打印当前值的 Vue 实例的实例 window.scrollY。向下滚动，下面的值应该增加。

Scroll and Watch

window.scrollY 的值：{{ value }}

下面是 JavaScript 代码。 调用 Vue.directive('scroll') 注册一个 v-scroll 您可以在 HTML 模板中使用的指令。 和 binding.value 包含的计算值 v-scroll 属性。 在以下情况下， binding.value 指向 handleScroll() 方法。

Vue.directive('scroll', {
  inserted: function (el, binding) {
    const onScrollCallback = binding.value; 
    window.addEventListener('scroll', () => onScrollCallback());
  }
});
// main app
new Vue({
  el: '#app',
  data: {
    value: 0
  },
  methods: {
    handleScroll: function() {
      this.value = window.scrollY;
    }
  }
});

下面是 HTML 模板。 注意 v-scroll 必须是一个函数。

<div>
  <h1>Scroll and Watch</h1>
  <div v-scroll="handleScroll">
    <p>The value of <code>window.scrollY</code>: {{ value }}!</p>
  </div>
</div>