0
<div className="box one" id="section1">
              <div className="num">1</div>
    </div>`enter code here`
            <div className="box two" id="section2">
              <div className="num">2</div>
            </div>
            <div className="box three" id="section3">
              <div className="num">3</div>
            </div>
            <div className="box four" id="section4">
              <div className="num">4</div>
            </div>

this is the jsx code, let's suppose that it's aligned vertically with CSS, I just need to chnage the scroll logic to verticall and get the scroll position because I want to trigger a lottie animation using scroll event

yessine jemaa
  • 3
  • 2

1 Answers1

0

Use React hooks.

const ScrollComponent = () => {
   const section1 = useRef(null)
   const section2 = useRef(null)
   const section3 = useRef(null)
   const section4 = useRef(null)

   useEffect(() => {
      window.addEventListener('scroll', handleScroll, true)
      return () => {
          window.removeEventListener('scroll', handleScroll, true)
      }
   }, [])

   const handleScroll = (e) => {
      if (e.target.scrollTop === section1.current.offsetTop) {
          // Scroll at section 1
      }

      if (e.target.scrollTop === section2.current.offsetTop) {
          // Scroll at section 2
      }

      if (e.target.scrollTop === section3.current.offsetTop) {
          // Scroll at section 3
      }

      if (e.target.scrollTop === section4.current.offsetTop) {
          // Scroll at section 4
      }
   }

   return (
      <>
          <div className="box one" ref={section1}">
              <div className="num">1</div>
          </div>
          <div className="box two" ref={section2}>
              <div className="num">2</div>
          </div>
          <div className="box three" ref={section3}>
              <div className="num">3</div>
          </div>
          <div className="box four" ref={section4}>
              <div className="num">4</div>
          </div>
      </>
   )
}
polyglot
  • 822
  • 5
  • 9
  • Hello, thanks for your answer but this code didn't diable the vertical scroll, maybe I didn't explain it very well, actually I aligned this page horizantally with these sections and I want to disble the vertical scroll and enable the horizantal scroll instead – yessine jemaa Sep 22 '20 at 20:45
  • then use scrollLeft and offsetLeft. overflow-x: auto; overflow-y: hidden; will disable the vertical scroll. – polyglot Sep 22 '20 at 21:00
  • I'm afraid that this didn't do the job, actually the mousewheel is moving the page horizatally, like it's disabled. And by the way in the HandleScroll method what should I put in the "//Scroll at section x" in your exemple – yessine jemaa Sep 22 '20 at 21:28
  • Replace scrollTop with scrollLeft and offsetTop with offsetLeft, like `if (e.target.scrollLeft === section1.current.offsetLeft)` – polyglot Sep 22 '20 at 21:31
  • yes I did that already and nothing happened, but I don't know what should I put in the if statement in this part ; `//Scroll at section 1` , should I just leave it like that ? – yessine jemaa Sep 22 '20 at 21:35