I need to detect whether user scroll to the bottom of the HTML element. I know that best way to do that is use:

obj.scrollTop === (obj.scrollHeight - obj.offsetHeight)

But the problem is that in my case, obj.scrollTop always returns 0. It's probably something wrong with my CSS or with the fact that I use slick library, but I can't find what it could be.

Here's my parent component:

<div className="container container--light container--player">
    <Header menu="dark" />
    <main className="player">
        <div className="scrollCarousel">
            <Slider ref={slider} {...settings}>
                <PlayerSlide1 />
                <PlayerSlide2 />
                <PlayerFAQ ref={faqContainer} />
            </Slider>
        </div>
    </main>
</div>

And child component HTML:

<section className="faq scrollCarousel__slide" ref={ref}>
        ... some inner HTML
</section>

I want to detect whether user scroll to the bottom of my child component (with class faq).

Here's my CSS:

body {
    overflow: hidden;
    position: relative;
}

.container {
    overflow: hidden;
    height: 100vh
}

.player {
    position: relative;
    margin-top: 50px;
}

.scrollCarousel {
    width: 100%;
    height: auto;
    min-height: 75vh;
}

.scrollCarousel__slide {
    width: calc(var(--siteWidthNarrow) - 20px);
    margin: auto;
    background: transparent;
    height: auto;
    min-height: 70vh;
    max-height: calc(100vh - 177px);
    overflow-x: visible;
}

.faq {
    padding-bottom: 30px;
    overflow: scroll;
}