How to detect body scroll?

Hi,

vuejs does not work with body so how can we detect v-on:scroll=“handleScroll” function.

if i create this in <div id=“app” @scroll=“handleScroll”>

it will not work because this is body scroll not app scroll.

is there any solution to detect body scroll?

actually, i want to hide header when scroll.

window.document.body.onscroll = function() {
    console.log(123);
}

Try this https://www.npmjs.com/package/vue-sticky

I do it like that:

    methods: {
        handleScroll: function (event) {
            // your code here
        }
    },

    created: function () {
        window.addEventListener('scroll', this.handleScroll);
    },
    destroyed: function () {
        window.removeEventListener('scroll', this.handleScroll);
    }

Not sure whether it is right way, but it works.

1 Like

Hi,
Nur, do you add this to the main component or this is possible to add it in a sub component ?
I tried in the app.vue component and in a sub one. No matter which I tried, it fails.
Can you please provide more informations concerning the context ?
Thank you

With the help of this post I figured it out. Using semantic ui, this one applies a height 100% on the html tag. This is causing the issue.
Works now :slight_smile:

It work both ways, you can do it in main component, or in any of *.vue components.
You can do that in multiple components, each will listen for window scroll event.

And if you are using other plugins affecting scroll, you should adjust accordingly, as you had figured out.

Just add “.passive”

v-on:scroll.passive=‘handleScroll’

methods: {
handleScroll: function(e) {
if ((e.target.scrollHeight-300) <= e.target.scrollTop) {
alert(“oi sou Eduardo Martins”);
}

		}

}