在 Vuejs 中观察 window.scrollY 的变化

Question

我有一个非常简单的应用程序，它有 2 个组件： App.vue 和另一个组件 Home.vue 我在其中保存应用程序的其余结构：粘性标题和一些部分要滚动到的锚点。

我想将一个类应用于粘性标题，以在滚动页面时最小化徽标。所以我想我会注意 window.scrollY 中的任何变化。因此，如果 scrollY 大于 0，则应用一些最小化徽标的类。

我试图在我的组件中监听滚动事件，但并没有走得太远。在此讨论中，提供了一个很好的解决方案，但我不知道在哪里放置滚动事件。 https://github.com/vuejs/Discussion/issues/324

所以，我认为最合适的解决方案是创建一个数据属性，为其分配 window.scrollY 图，然后观察其值的变化。不幸的是，观察者永远不会被触发。所以现在我被困住了。代码是：

 data () {
return {
  ...
  windowTop: window.top.scrollY
 }
}
...
watch: {
 windowTop: {
  immediate: true,
  handler (newVal, oldVal) {
    console.log(newVal, oldVal);
  },
 }
}

关于我可能做错了什么的任何想法？

原文由 Iulia Mihet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

window 不能像那样被动地使用属性。相反，您必须收听 window 的 scroll 事件并做出相应响应：

 mounted() {
  window.addEventListener("scroll", this.onScroll)
},
beforeDestroy() {
  window.removeEventListener("scroll", this.onScroll)
},
methods: {
  onScroll(e) {
    this.windowTop = window.top.scrollY /* or: e.target.documentElement.scrollTop */
  }
}

原文由 tony19 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对我来说，以上都不起作用。

我必须将 true 作为添加/删除滚动侦听器中的第三个参数传递：

 mounted() {
  window.addEventListener("scroll", this.onScroll, true)
},
beforeDestroy() {
  window.removeEventListener("scroll", this.onScroll, true)
},
methods: {
  onScroll(e) {
    this.windowTop = e.target.scrollTop;
  }
}

第三个参数：您应该能够附加一个文档级侦听器，第三个参数为 true 以捕获所有元素上的滚动事件。这是它的样子：

 document.addEventListener('scroll', function(e){ }, true);

最后的 true 是重要的部分，它告诉浏览器在调度时捕获事件，即使该事件通常不会冒泡，如更改、聚焦和滚动。

原文由 LastM4N 发布，翻译遵循 CC BY-SA 4.0 许可协议