Necesito detectar si el usuario se desplaza hasta la parte inferior del elemento HTML. Sé que la mejor manera de hacerlo es usar:

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

Pero el problema es que, en mi caso, obj.scrollTop siempre devuelve 0. Probablemente haya algún problema con mi CSS o con el hecho de que uso la biblioteca slick , pero no puedo encontrar lo que podría ser.

Aquí está mi componente principal:

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

Y el componente secundario HTML:

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

Quiero detectar si el usuario se desplaza hasta la parte inferior de mi componente secundario (con faq de clase).

Aquí está mi 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; }