vue.js:如何对页面滚动反应

Question

我需要对窗口(视口(滚动以检测元素何时可见。

最终目标是创建类似的东西，但不等于无限的滚动器。

我想学会一个人做到这一点。 不要链接我的插件 请，我需要在通过他人的插件构造之前了解vue.js。

如何使用vue.js？

或

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

在文档中，我找到了@scroll，但它对元素的滚动而不是页面的滚动。

Answer 1

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

i在此处复制代码以换下后期。

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