Блог

Я использую хук Framer Motion useViewportScroll для отслеживания прокрутки пользователя на моей странице, но он не обновляется. Я наткнулся на эту статью, в которой объясняется, как Framer Motion использует document.body.clientHeight и window.innerHeight для вычисления прокрутки области просмотра.

В статье объясняется, как некоторые CSS могут нарушить это, в частности, если document.body.clientHeight - window.innerHeight <= 0 .

Кажется, я не могу понять, как это может быть неправдой. Даже при полном отсутствии CSS в моем приложении react это выражение оценивается как true . Вы можете увидеть это в этом примере на CodeSandbox.

Спасибо!

Я думаю, причина, по которой вы не видите обновлений, заключается не в каком-либо css.
Framer, похоже, вычисляет его состояние автономно от react. Поэтому, когда Framer обновляет свои значения внутренне. реакция не обязательно вызовет повторный рендеринг с обновленными значениями. (вероятно, это делается для повышения производительности).

Вы можете подключиться к изменениям состояния, подписавшись на onChange обработчик, который предоставляет Framer, и установить интересующее вас состояние.

Например, onChange вызов on scrollYProgress вызовет setState react для повторного рендеринга.

 import React from "react";
import { useViewportScroll } from "framer-motion"

const FramerPostionHook = () => {
  const { scrollYProgress } = useViewportScroll();
  const [hookedYPostion, setHookedYPosition] = React.useState(0);
  React.useEffect(()=>{
    // hook into the onChange, store the current value as state.
    scrollYProgress.onChange(v=> setHookedYPosition(v));
  },[scrollYProgress]); //make sure to re-subscriobe when scrollYProgress changes

  return  (<>
  scrollYProgress.current: {scrollYProgress.current}<br/>
  scrollYProgress.hookedYPostion: {hookedYPostion}<br/>
  </>)
}
 

Пример песочницы