如何使用JavaScript在React js中更改滚动方向并获取滚动变量

问题描述

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

这是jsx代码，我们假设它与CSS垂直对齐，我只需要将滚动逻辑更改为verticall并获取滚动位置，因为我想使用滚动事件来触发抽奖动画

解决方法

使用React钩子。

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',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>
      </>
   )
}