如何使用 framer-motion 检测某些滚动位置？答案

【问题标题】：How to detect certain scroll position with framer-motion?如何使用 framer-motion 检测某些滚动位置？
【发布时间】：2020-10-07 08:05:52
【问题描述】：

当scrollTop等于500px时，我想在一个固定位置的div上触发动画。有没有办法在成帧运动中做到这一点。我只找到当元素在视口中时提出的解决方案。但是我的 div 总是在视口中，因为它有一个固定的位置。我需要一个内置的滚动位置观察器。

sandbox

import { useInView } from "react-intersection-observer";
import { motion, useAnimation } from "framer-motion";

【问题讨论】：

标签： reactjs framer-motion

【解决方案1】：

这已经有点老了，但这里是答案。

import { useViewportScroll } from "framer-motion";

const Nav = () => {
    const { scrollY } = useViewportScroll();
    
    scrolly.onChange(y => {
    // y = scroll position
    //Do Something
    })
}

【讨论】：

【解决方案2】：

  const { scrollY } = useViewportScroll();

  scrollY.onChange(y => {
    console.log('y ', y)
  })

只是一个小错误:)

【讨论】：

你指的错字在哪里？答案框只能用于完整答案
@camille scrolly 而不是 scrollY。无论如何，你的眼睛很敏锐，但正如卡米尔所说，答案框应该用于答案。您可以获得更多声誉，然后评论该答案以指出它。