javascript - 在 Vuejs 中观察 window.scrollY 的变化

Question

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

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

我尝试在我的组件中监听滚动事件，但收效甚微。在此讨论中，提供了一个很好的解决方案，但我不知道在哪里放置滚动事件。 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);
  },
 }
}

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

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 */
  }
}