Блог

Итак, у меня есть сложная анимация, которую я хочу сделать на колесе с помощью React. По сути, когда пользователь сначала прокручивает страницу, она сначала уменьшается, чтобы показать, что я редактирую страницу на мониторе. Затем, как только он достигнет своей полной ширины, он позволит пользователю снова прокрутить страницу вниз. Когда вы прокручиваете назад, он снова увеличивается. Так что пока все в порядке, я сделал все, о чем упоминал, с одной уловкой:

Когда вы сначала пытаетесь уменьшить масштаб, предположим, что вы вообще не перемещаете мышь во время прокрутки и что ваша прокрутка достаточно быстрая, чтобы вы не прекращали прокрутку очень долго, чтобы переместить палец на колесе прокрутки. По какой-то причине он просто сидит на месте и не прокручивается, пока вы не переместите мышь или не подождете десятую долю секунды или дольше.

Поэтому в настоящее время я выполняю все это, используя комбинацию onScroll и onWheel. Я использую onScroll, чтобы посмотреть, вернулись ли мы в верхнюю часть страницы, чтобы он знал, запускать ли анимацию прокрутки и прокрутки или прокручивать нормально. Если он находится в верхней части страницы и все еще увеличен, переполнение скрыто, в противном случае это переполнение: прокрутка.

Вот мой код:

   const [scrolledOut, setScrolledOut] = React.useState(false)
  const [scrollTop, setScrollTop] = React.useState(0)
  const [scale, setScale] = React.useState(1)

  const { height, width } = useWindowDimensions();

  function checkLocking(n) {
    if(n < 0.36 || scrollTop > 0) {
      setScrolledOut(true)
    } else {
      setScrolledOut(false)
    }
  }

  const handleWheel = (e) => {
    if(width <= 991) {
      return null
    }
    let scrollAmount = e.deltaY
    if(scrollAmount > 0 amp;amp; scale > 0.35 amp;amp; !(scrollTop > 0)) {
      const newScale = parseFloat(scale) - 0.05
      setScale(parseFloat(newScale).toFixed(2))
      checkLocking(newScale)

      return null
    } else if(scrollAmount < 0 amp;amp; scale < 1 amp;amp; !(scrollTop > 0)) {
      const newScale = parseFloat(scale)   0.05
      setScale(parseFloat(newScale).toFixed(2))
      checkLocking(newScale)

      return null
    }

    return null
  }

  const handleScroll = (e) => {
    let element = e.target;
    setScrollTop(element.scrollTop)
  }
 

Это заблокирует или разблокирует этот элемент с помощью троичного оператора:

 <div className="App" onScroll={(e) => handleScroll(e)} onWheel={(e) => handleWheel(e)} className={scrolledOut ? "App unlocked" : "App locked" } data-theme="dark">
 

Есть также несколько кнопок, которые автоматически уменьшают масштаб, а затем прокручивают, но это не имеет значения. Так что мой вопрос действительно сводится к тому, правильно ли я это делаю? Мог бы я сделать это лучше? Если я все делаю правильно, как мне исправить проблему с прокруткой?