vue.js(2) window.scrollY 总是返回 0答案

【问题标题】：vue.js(2) window.scrollY always return 0vue.js(2) window.scrollY 总是返回 0
【发布时间】：2021-03-13 06:27:55
【问题描述】：

我有一些关于 vuejs 和路由器的问题..

window.addEventListener('scroll', ...) 在我的组件中也未检测到。
当我在 console.log 中键入“window.scrollY”时。它总是会返回 0 给我。
右滚动(Y)可用且window.innerHeight不等于0
我无法检测到客户端何时将滚动条移至底部
我用vuestic和vue-router 谢谢

  created () {
    // Not working because window.scrollY always return 0
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll (event) {}
  }

【问题讨论】：

请提供minimal reproducible example。
它是 'window.innerHeight' 不会增加取决于内容的高度（从获取动态）

标签： javascript vue.js vue-router vuestic-admin

【解决方案1】：

您可以尝试监听子元素的滚动。

并使用 getBoundClientRect：

<template>
  <div id="app">
    <nav>navbar</nav>
    <main id="listen">main</main>
  </div>
</template>

<script>
export default {
  name: "App",
  created() {
    document.addEventListener("scroll", this.listenScroll);
  },
  destroyed() { // remember to remove the listener when destroy the components
    document.removeEventListener("scroll", this.listenScroll);
  },
  methods: {
    listenScroll() {
      let myScroll = document.querySelector("#listen").getBoundingClientRect()
        .top;
      console.log(myScroll);
    },
  },
};
</script>

<style>
nav {
  height: 100px;
}
main {
  height: 700px;
}
</style>

这里有一个代码框https://codesandbox.io/s/great-hill-x3wb1?file=/src/App.vue:0-560

【讨论】：