在 Vuejs 中观察 window.scrollY 的变化

新手上路,请多包涵

我有一个非常简单的应用程序,它有 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 许可协议

阅读 695
2 个回答

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

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

在 Vue 中编辑 Watching scrollTop

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

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

我必须将 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题