我需要检测用户是否滚动到HTML元素的底部。我知道最好的方法是用途：

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

但问题是，在我的例子中，obj.scrollTop总是返回0。这可能是我的CSS或我使用slick库的事实有问题，但我找不到它可能是什么。
下面是我的父组件：

<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>

和子组件HTML：

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

我想检测用户是否滚动到我的子组件的底部（使用类faq）。
以下是我的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;
}