reactjs - 通过滚动到预定义的组件/节点来触发动画

Question

我希望能够将useScrollTrigger钩子“绑定”到特定的Component/Node而不是window默认值。

下面显示了useScrollTrigger预期的参数：

export interface UseScrollTriggerOptions {
  disableHysteresis?: boolean;
  target?: Node | Window;
  threshold?: number;
}

我试图传递对我的组件的引用，但这导致了崩溃。Material-UI 库没有解释如何使用useScrollTrigger除了与AppBar.

以下代码片段说明了我想要实现的目标：

const ref = React.useRef();
const scrollTrigger = useScrollTrigger({
  disableHysteresis: true,
  target: ref.current,
});

<Grid container spacing={2}>
  {services.map((service) => (
    <Grid key={uid(service)} item md={4} sm={6} xs={12}>
      <Grow
        mountOnEnter
        in={scrollTrigger}
        timeout={2048}
      >
        <Card
          ref={ref}
          className={classes.card}
          elevation={2}
        >
          <CardHeader --- REDACTED ---/>
          <CardContent --- REDACTED --->
            --- REDACTED ---
          </CardContent>
          <CardActions --- REDACTED --->
            --- REDACTED ---
        </Card>
      </Grow>
    </Grid>
  ))}
</Grid>