strategicsdemexico's avatar

Scroll down on Vue

How do I handle the scroll down event?

0 likes
1 reply
thomaskim's avatar
Level 41

Just handle it like you normally would. Bind the scroll event listener to a method. Check if the new scroll position exceeds the previous one, and if so, you are scrolling down.

Example:

<div id="app" @scroll="handleScroll">

We are now listening for the "scroll" event and the "handleScroll" method will handle it. This method gets the current scroll position and checks it with the previous one. If it exceeds the previous one, then you are scrolling down. Afterward, we set the new scroll position to the current one.

handleScroll: function(e) {
    var currentScrollPosition = e.srcElement.scrollTop;
    if (currentScrollPosition > this.scrollPosition) {
        console.log("Scrolling down");
    }
    this.scrollPosition = currentScrollPosition;
}

Working example: http://jsfiddle.net/pyj5jdn6/

2 likes

Please or to participate in this conversation.