I try to make a timeline that is dynamicaly loaded when scrolling. Due to this I need the scroll event, bined with React.

window.addEventListener("scroll", console.log('scroll'), true);

This should console log a scroll every time I scroll, but it just log it once, then nothing

EDIT:

If I use it in my real application now, with this code :

callbackFunc = () => {
        for (var i = 0; i < items.length; i++) {
            if (this.isElementInViewport(items[i])) {
                items[i].classList.add("in-view");
            }
        }
    }

ponentDidMount() {
        window.addEventListener("load", function (event) { this.callbackFunc(); }, true);
        window.addEventListener("resize", function (event) { this.callbackFunc(); }, true);
        window.addEventListener("scroll", function (event) { this.callbackFunc(); }, true)
    }

It says callbackFunc is not a function

I try to make a timeline that is dynamicaly loaded when scrolling. Due to this I need the scroll event, bined with React.

window.addEventListener("scroll", console.log('scroll'), true);

This should console log a scroll every time I scroll, but it just log it once, then nothing

EDIT:

If I use it in my real application now, with this code :

callbackFunc = () => {
        for (var i = 0; i < items.length; i++) {
            if (this.isElementInViewport(items[i])) {
                items[i].classList.add("in-view");
            }
        }
    }

ponentDidMount() {
        window.addEventListener("load", function (event) { this.callbackFunc(); }, true);
        window.addEventListener("resize", function (event) { this.callbackFunc(); }, true);
        window.addEventListener("scroll", function (event) { this.callbackFunc(); }, true)
    }

It says callbackFunc is not a function

• javascript
• reactjs
• addeventlistener

3 Answers 3

This isn't working because the event listener expects a function as it's second argument (or an object implementing the EventListner interface) which it will call when the "scroll" occurs. console.log is a function, but console.log("scroll") isn't a function, its a called function. And so the value you are technically putting as the second argument is undefined (as console.log("scroll") returns undefined).

const a = console.log("scroll");
console.log(a); // undefined (the value of your second arugment)

So, you need to wrap the console.log() in a function, so the function is called, which will then call your console.log() method. You can achieve this by using an ES6 arrow function:

window.addEventListener("scroll", _ => console.log('scroll'), true);

window.addEventListener("scroll", _ => console.log('scroll'), true);

body {
  height: 200vh;
}

As per your edit, the arrow function should solve your issue. Currently, the window is calling your event listener function, so this is referring to the window, not the context of your app. Using an arrow function should fix this (as an arrow function doesn't have it's own this).

Try this:

window.addEventListener("scroll", function(event) { console.log('scroll'); }, true);

Try adding it in reactjs

 ponentDidMount() lifecycle function