0

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?

Azhar Zaman
  • 91
  • 1
  • 2
  • Does this answer your question? [Get the number of an element's pixels which are inside the viewport](https://stackoverflow.com/questions/28685693/get-the-number-of-an-elements-pixels-which-are-inside-the-viewport) – goto Dec 29 '20 at 14:23
  • Yes it is possible and there are different ways. Please explain what have you tried so we can better help you. – Ruan Mendes Dec 29 '20 at 14:24
  • so did you add a scroll event listener to the element? – epascarello Dec 29 '20 at 14:26
  • [`element.addEventListener('scroll', callback)`](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event) should work – Nino Filiu Dec 29 '20 at 14:26
  • I have tried if(scrollableDiv.scrollY >= 200){console.log('Scrolled 200 pxs')}, but It does not worked for me. I am a beginner developer, so i am not even sure element.scrollY even exist or not. – Azhar Zaman Dec 29 '20 at 14:51
  • 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. – Azhar Zaman Dec 29 '20 at 15:01

0 Answers0