javascript - Scroll div listner

Question

I have a vertically scrollable div, in which n number of images are being mapped each with feedback buttons (useful) or (not useful).

Like

<div className="scrollable__div" id="scrollable__div">
        {sliderImages.map((sliderImg) => (
          <>
            <img src={sliderImg} alt="" />
            <div className="btnsSection">
              <Button
                onClick={SliderYesClicked}
                className="greenBtn"
                id="section2__yesBtn"
              >
                Yes
              </Button>
              <Button
                onClick={SliderNoClicked}
                className="redBtn"
                id="section2__noBtn"
              >
                No
              </Button>
            </div>
          </>
        ))}
      </div>

I want a specific function to be called when this div scrolled to a specific distance. example

element.addEventListener('scroll', callback)

This works but I want a quantitative listening of scroll. Like when horizontal scroll of div is greater than x, then call this.

Possibly as

    if (scrollableDiv.scrollY >= 100){
   console.log(''Scrolled 100px)
}

Is this possible?

Answer 1

等待大神答复