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

Question

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

以下显示useScrollTrigger预期参数：

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

我试图将引用传递给我的组件，但这导致了崩溃。材质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>

Answer 1

我想您已经知道了解决方案。

基于这些讨论https://github.com/mui/material-ui/issues/20184https://github.com/mui/material-ui/issues/32477，useScrollTrigger钩子不被设计为监听组件/节点是否被滚动。

它的设计目的是监听windows是否滚动。

也许您可以创建一个自定义挂钩，通过以下讨论来检测组件/节点是否滚动。当用户使用React js滚动到div底部时进行检测。