Javascript Vue.js：如何应对页面滚动？

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

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

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

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

或

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

---

在文档中，我找到了

@scroll

，但它会对元素的滚动做出反应，而不是页面的滚动。

您需要在

窗口

对象上的全局滚动事件中添加一个侦听器

window.addEventListener('scroll', listener)

您可以找到关于如何在MDN上正确处理此事件的好建议：

您可以使用

节点#getBoundingClientRect

计算节点是否可见，此方法将为您提供节点在其可滚动容器中的顶部位置，您也可以使用offsetTop属性。为此，您必须检索视口高度，即

窗口。innerHeight

是您的案例，而当前滚动位置是

窗口。scrollY

然后你可以这样做：

isVisible = innerHeight - scrollY > offsetTop - scrollY

---

这里有一个很好的建议：

我在这里为后代复制代码

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

---

嗯。你能在

newvue（{…}）中写下如何使用它吗，请问？你是什么意思？如果您想在新的Vue（{…}）中使用它，那么只需将它插入到。。。如果你想把它作为Vue模块使用，那么就把它导出。如果我简单地把你的代码复制/粘贴到新的Vue（{…}）中，我会遇到很多语法错误。。。。编辑：是的，它很有效。。。我的IDE发出了警告，但很明显，webpack修复了js代码中的所有问题，因此它实际上可以工作。谢谢。[编辑：好的，我看到了你的新答案，所以没关系：）]哦，我明白了。。。可能是因为它是ES6。尝试用
data:function（）
，
handleScroll（）
，
创建（）
和
销毁（）
替换
data:function（）
，
handleScroll:function（）
，
创建：function（）
和
销毁：function（）
（从内存中…我很久没有写ES5了）是否有人知道如何将其放入vuex中，并仅使用一个变量访问每个组件中的滚动位置？抱歉，可能重复此问题，但此问题比重复的候选者要老。。。老得多