When using vue.js(2), the function window.scrollY consistently returns a value of 0

Question

When using vue.js(2), the function window.scrollY consistently returns a value of 0

Here are some issues I'm experiencing with vuejs and router:

The window.addEventListener('scroll', ...) is not being detected in my component.
When I enter 'window.scrollY' in console.log, it always returns 0 to me.
Scroll(Y) is working properly and window.innerHeight is not equal to 0.
I am unable to detect when the client scrolls to the bottom of the page.
I am using vuestic and vue-router.

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

javascript vue.js vue-router vuestic-admin

Answer 1

Answer №1

If you need to detect when a child element is being scrolled, one approach is to use getBoundingClientRect method.

Here's an example code snippet:

<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() { 
    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>

You can view and test this code in the following codesandbox link: https://codesandbox.io/s/great-hill-x3wb1?file=/src/App.vue:0-560

Answer 2

If you need to detect when a child element is being scrolled, one approach is to use getBoundingClientRect method.

Here's an example code snippet:

<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() { 
    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>

You can view and test this code in the following codesandbox link: https://codesandbox.io/s/great-hill-x3wb1?file=/src/App.vue:0-560

When using vue.js(2), the function window.scrollY consistently returns a value of 0

Answer №1

Similar questions

JavaScript strangeness

A step-by-step guide for updating a minor version of Angular with Angular CLI

Updating variable values using buttons in PHP and Javascript

Jquery loop using closures

Leveraging event listeners in conjunction with React's useEffect function

Can you provide guidance on decompressing SVGZ files using JavaScript?

In order to ensure functionality on Firefox 3 and Opera, it is essential to include multiple <script> tags and the <!-- //required for FF3 and

Leverage Vue.js with Vuex for state management to achieve two-way binding without the need for mutation via v-model

The issue arises when DataTable fails to retrieve the ID element following a page transition

Personalized scrollbar extends beyond the screen

What is the best way to store changing images in a Next.js application?

The character is having trouble displaying correctly in the ajax response

How to successfully send data props from child components to parent in Vue3

JavaScript's data.map function cannot be found

The usage of 'import' and 'export' is restricted to the top level of the code

Is it possible to utilize the same database connection for multiple routes in an

Initializing a table with data will only function properly when a breakpoint is set

It is not possible to invoke a function within the AJAX success method

React error: File undefined (cannot be exported)

Invoke cloud functions independently of waiting for a response