Lightning Web Component detect if user scrolled

Question

I want to detect if user is scrolling, to change css classes?

This is not working:

connectedCallback() {

    window.addEventListener('scroll', function() {this.tScroll()});
}

Please guide me!

Answer 1

Welcome to SFSE.

You need scrollable height to get this event fired. You can check this playground link.

HTML:

<template>
    <div style="height: 1000rem;
            width:2rem;
            background:red;" >
    </div>
</template>

JS:

connectedCallback() {
    this.count = 0;
    window.addEventListener('scroll', () => console.log(`scrolled ${this.count++} times`));
}