使用 Typescript 的 Framer-motion 动画：ScrollY 找不到 .current

Question

我正在尝试创建一个动画，当用户向下滚动时隐藏菜单，当用户返回顶部时菜单出现。

一切正常，但是当我尝试赋予为钩子提供useScroll类型的scrollY属性时，问题就出现了。

这是我找不到实现该类型的方法的代码。

 const { scrollY } = useScroll();
 const [isScrolling, setScrolling] = useState<boolean>(false);

 const handleScroll = () => {
  if (scrollY?.current < scrollY?.prev) setScrolling(false);
  if (scrollY?.current > 100 && scrollY?.current > scrollY?.prev) setScrolling(true);
 };

useEffect(() => {
  return scrollY.onChange(() => handleScroll());
});

Answer 1

我找到了解决方案！

阅读文档框架，我看到他们更新了获取上一个和当前滚动的值的方法。

scrollY.get()-> 当前

scrollY.getPrevious()-> 上一页

 const { scrollY } = useScroll();
 const [isScrolling, setScrolling] = useState<boolean>(false);

 const handleScroll = () => {
  if (scrollY.get() < scrollY.getPrevious()) setScrolling(false);
  if (scrollY.get() > 100 && scrollY.get() > scrollY.getPrevious()) setScrolling(true);
 };

 useEffect(() => {
  return scrollY.onChange(() => handleScroll());
 });