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

Question

我有一些关于 vuejs 和 router 的问题..我的组件中也未检测到 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) {}  }

Answer 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>

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