vue.js listen to scroll event

[ThomasRalee]

Hi guys, i cant seem to figure out how to do a

v-on="scroll:scrollFunction"

Here is my code. http://plnkr.co/edit/R152f1tZTKeA3uC8ArRN?p=preview

Does anyone know what's wrong?

Thanks in advance! Cheers, Ralee

[socieboy]

Did you figure out?

[jeerbl]

Anyone figured out?

[LinusBorg]

This is outdated v0.11 syntax.

v1.0/2..0: v-on:scroll="scrollFunction"

[jeerbl]

I actually found a solution by attaching the window scroll event to my component method like this:

data () {
  return {
    scrolled: false
  };
},
methods: {
  handleScroll () {
    this.scrolled = window.scrollY > 0;
  }
},
created () {
  window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll);
}

[LinusBorg]

Ah, you were talking about the window event...

BTW Don't forget to remove the handler on destroy

[gdomiciano]

Update: For nuxt.js window will be available only on beforeMount and beforeDestroy.

data () {
  return {
    scrolled: false
  };
},
methods: {
  handleScroll () {
    this.scrolled = window.scrollY > 0;
  }
},
beforeMount () {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy () {
  window.removeEventListener('scroll', this.handleScroll);
}

[LinusBorg]

That's not true

[gdomiciano]

@LinusBorg , I am using SSR, in this case window will be available just into those functions.

[LinusBorg]

I'm familiar with SSR, and still, that's not true.

window is the global object in browsers, it's available always any everyhwere. you can't hid from it, so to say.

And on the server, it's obviously not available at all.

What gives you the impression that it's only available in those two hooks? Where specifically is it not available that you wanted it to be?

[josantana]

IF you're using Nuxt for SSR, I partially agree with you, @gdomiciano.

You have to be careful with the initial page render, due to the fact that it happens from the server side. If you try to reach the window object before the beforeMount hook, it won't be available because everything is happening on the server and there is no browser there. From the beforeMount hook, the window object will be available because all the action takes place in the browser.

But once loaded, IF the next page or component is not supposed to be rendered by the server at all, you can call the window object from any hook you want...

[up9cloud]

Note: if u has issue with window.addEventListener, try document.body.addEventListener may work.

methods: {
  handleScroll () {
    console.log('scrolling')
  }
},
created () {
  document.body.addEventListener('scroll', this.handleScroll);
},
destroyed () {
  document.body.removeEventListener('scroll', this.handleScroll);
}

[hoanghiep1x0]

i use jquery

mounted(){
     let _this= this;
        $(window).scroll(
            function (event) {
               if($(window).scrollTop()>150){
                    _this.scroll = true;
                }else{
                    _this.scroll = false;
            }
            }
        );
    }

[Razac6]

Only hope is use addEventListener in clean JS?

[felixdenoix]

@up9cloud, I got it working using your snippet (🎊cheers🎊) ! Any idea why document.body is the way to go ?

[moltar]

Btw, document.addEventListener worked for me instead of document.body.addEventListener.

[ibakhsh]

i have this

       beforeMount() {
            document.body.addEventListener('scroll', this.handleScroll);
            console.log('scrolling Injected');
        },
        beforeDestroy() {
            document.body.removeEventListener('scroll', this.handleScroll);
            console.log('scrolling Destroyed');
        },
        methods: {
            handleScroll: function(e){
                console.log('scrolling...');
            }
        } 

but for some reason it does not work ? what am i missing ..

[moltar]

@ibakhsh I think you have to do it on mounted event.

[ibakhsh]

@moltar Yesss Thank you

also for it work without constraint to the window but to the respective of the controller i had to change it to my component's div 👍

mounted() {
            document.getElementById(this.containerId).addEventListener('scroll', this.handleScroll);
            console.log('scrolling Injected');
        },
        beforeDestroy() {
            document.getElementById(this.containerId).removeEventListener('scroll', this.handleScroll);
            console.log('scrolling Destroyed');
        },
        methods: {
            handleScroll () {
                this.scrolled = window.scrollY > 0;
                // var sh = $(".lovOpenContainer").scrollHeight;
                // var st = $(".lovOpenContainer").scrollTop;
                var sh = document.getElementById(this.containerId).scrollHeight;
                var st = document.getElementById(this.containerId).scrollTop;
                var oh = document.getElementById(this.containerId).offsetHeight;
                console.log('scrolling..'+(sh-st-oh+1));
                if(sh-st-oh+1<1) {
                    var n = this.items.length+1;
                    this.items.push({value: n, description: "New loaded content #:"+n});
                }
            }
         }