Блог

Главная - Вопросы по программированию - Как я могу изменить направление прокрутки в React js с помощью javascript и получить переменные прокрутки

Как я могу изменить направление прокрутки в React js с помощью javascript и получить переменные прокрутки

#javascript #reactjs #jsx #lottie

#javascript #reactjs #jsx #лотти

Вопрос:

 <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, мне просто нужно изменить логику прокрутки на вертикальную и получить положение прокрутки, потому что я хочу вызвать анимацию лотти с помощью события прокрутки

Ответ №1:

Используйте перехватчики реакции.

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

Комментарии:

1. Здравствуйте, спасибо за ваш ответ, но этот код не отключил вертикальную прокрутку, возможно, я не очень хорошо это объяснил, на самом деле я выровнял эту страницу по горизонтали с этими разделами, и я хочу отключить вертикальную прокрутку и вместо этого включить горизонтальную прокрутку

2. затем используйте scrollLeft и offsetLeft. overflow-x: auto; overflow-y: hidden; отключит вертикальную прокрутку.

3. Я боюсь, что это не сработало, на самом деле колесо мыши перемещает страницу горизонтально, как будто оно отключено. И, кстати, в методе HandleScroll, что я должен поместить в «// Scroll в разделе x» в вашем примере

4. Замените scrollTop на scrollLeft и offsetTop на offsetLeft, например if (e.target.scrollLeft === section1.current.offsetLeft)

5. да, я уже это сделал, и ничего не произошло, но я не знаю, что я должен вставить в оператор if в этой части; //Scroll at section 1 , я должен просто оставить это так?