Vue.js:如何对页面滚动做出反应？

Question

我需要对窗口(视口)滚动做出反应,以便能够检测元素何时可见.

最终目标是创建SIMILAR但不等于无限卷轴的东西.

我想学会自己做.不要链接我的插件请在构建其他插件之前了解Vue.js.

如何使用Vue.js检测页面(窗口或更好的视口)滚动和调整大小？

要么

我如何监督元素,div或span的垂直位置,以便在它接近可见时作出反应？

在我找到的文档中@scroll,但它对元素的滚动做出反应,而不是页面的滚动.

Answer 1

这里有一个很好的建议:https://github.com/vuejs/Discussion/issues/324#issuecomment-240978025

我在这里复制代码以供后代使用.

data () {
  return {
    scrolled: false
  };
},
methods: {
  handleScroll () {
    this.scrolled = window.scrollY > 0;
  }
},
created () {
  window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll);
}