Vue.js 在 Vuejs 中Watch观察 window.scrollY 的变化

发布于03月28日

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

我想对粘性标题应用一个类，以便在页面滚动时最小化徽标.所以我想我会留意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);
  },
 }
}

你知道我可能做错了什么吗？

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.js 在 Vuejs 中Watch观察 window.scrollY 的变化

推荐答案

Vue.js相关问答推荐

如何根据数据库中的条件在vue中创建类

Vue3：如何在功能组件中重用插槽vnode

如何在 Vuetify 2 中的轮播项目上放置 href 属性？

Vue Router中.getRoutes()获取的路由顺序优化建议

处理多张卡片中的按钮

vuex 未知动作类型：addTodo

如何使用 vue.js 和 vue 路由实现当前路由的子菜单的子菜单

Vuetify grid layout - 如何填充网格中元素的高度

vuejs vue-cli 如何使用 console.log 而不会出现任何错误

未捕获的类型错误：无法读取未定义的属性initializeApp

如何将 vue.js 与 gulp 一起使用？

PhpStorm 中Expected预期表达式

如何从 vue.js 中的自定义组件中冒泡点击事件？

如何让 Vue (vue cli 3) 正确处理 GraphQL 文件？

基于条件的VueJS HTML元素类型

Vue 动态组件事件绑定

执行调度程序刷新期间未处理的错误，这可能是一个 Vue 内部错误

如何从 Vuex 操作访问 Vuex 状态属性？

无法访问手表处理程序 vuejs 中的数据变量

使用 vuex-persistedstate 仅使一个模块持久化