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

Question

我有一些关于 vuejs 和 router 的问题..

1. 我的组件中也未检测到 window.addEventListener('scroll', ...) 。

2. 当我在 console.log 中输入“window.scrollY”时。它总是会返回 0 给我。

3. 右滚动(Y)可用并且window.innerHeight不等于0

4. 我无法检测到客户端何时将滚动条移动到底部

5. 我使用 vuestic 和 vue-router 谢谢

 created () {

    // Not working because window.scrollY always return 0

    window.addEventListener('scroll', this.handleScroll);

  },

  methods: {

    handleScroll (event) {}

  }

Answer 1

您可以尝试监听子元素的滚动。并使用 getBoundClientRect：<template>&nbsp; <div id="app">&nbsp; &nbsp; <nav>navbar</nav>&nbsp; &nbsp; <main id="listen">main</main>&nbsp; </div></template><script>export default {&nbsp; name: "App",&nbsp; created() {&nbsp; &nbsp; document.addEventListener("scroll", this.listenScroll);&nbsp; },&nbsp; destroyed() { // remember to remove the listener when destroy the components&nbsp; &nbsp; document.removeEventListener("scroll", this.listenScroll);&nbsp; },&nbsp; methods: {&nbsp; &nbsp; listenScroll() {&nbsp; &nbsp; &nbsp; let myScroll = document.querySelector("#listen").getBoundingClientRect()&nbsp; &nbsp; &nbsp; &nbsp; .top;&nbsp; &nbsp; &nbsp; console.log(myScroll);&nbsp; &nbsp; },&nbsp; },};</script><style>nav {&nbsp; height: 100px;}main {&nbsp; height: 700px;}</style>这里有一个codesandbox&nbsp;https://codesandbox.io/s/great-hill-x3wb1?file=/src/App.vue:0-560