Question

我需要对窗口（视口）滚动做出反应，以便能够检测元素何时可见。

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

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

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

OR

我如何监督元素，div或跨度的垂直位置，以便在它近似可见时作出反应？

在文档中我找到了@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);
}

Answer 2

您需要为window对象上的全局滚动事件添加一个侦听器。

window.addEventListener('scroll', listener)

您可以在MDN上找到有关如何正确处理此事件的好建议： https://developer.mozilla.org/en-US/docs/Web/Events/scroll

您可以使用Node#getBoundingClientRect来计算您的节点是否可见，此方法将为您提供节点在其可滚动容器中的顶部位置，您可以使用offsetTop属性。为此，您必须检索视口高度，window.innerHeight就是您的情况，以及您当前的滚动位置，在您的情况下为window.scrollY。

然后你可以这样做：

isVisible = innerHeight - scrollY > offsetTop - scrollY

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

2 个答案: