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

【问题标题】：Vue.js: how to react to page scrolling?Vue.js：如何对页面滚动做出反应？
【发布时间】：2017-06-28 14:10:37
【问题描述】：

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

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

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

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

或

如何监控元素、div 或 span 的垂直位置，以便在它接近可见时做出反应？

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

【问题讨论】：

stackoverflow.com/questions/45822150/…的可能重复
抱歉，这个问题比你重复的候选人老...老很多

标签： javascript vue.js

【解决方案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);
}

【讨论】：

嗯。请在new Vue({ ... }); 中写下如何使用它好吗？
什么意思？如果你想在 new Vue({...}) 中使用它，那么只需将它插入... 如果你想将它用作 Vue 模块，则将其导出。
如果我只是将您的代码复制/粘贴到 new Vue({...}) .... 编辑：是的，它有效...我的 IDE 发出警告但显然 webpack 修复了 js 代码中的所有问题，所以它实际上是有效的。谢谢。
[编辑：好的，我看到了你的新答案，所以没关系 :)] 哦，我明白了......可能是因为它是 ES6。尝试将data ()、handleScroll ()、created () 和destroyed () 替换为data: function ()、handleScroll: function ()、created: function () 和destroyed: function ()（凭记忆......我很久没写ES5了)
有谁知道如何将其放入 vuex 并仅使用一个变量来访问每个组件中的滚动位置？

【解决方案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

【讨论】：