Trigger Animation by scrolling to a predefined Component/Node

Question

I would like to be able to "bind" the useScrollTrigger hook to a specific Component/Node rather than the window default value.

The following shows the useScrollTrigger expected parameters:

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

I tried to pass a reference to my Component but this has caused a crash. The Material-UI library does not explain how to use useScrollTrigger for things other than interactions with an AppBar.

The following code snippets illustrates what I would like to achieve:

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>

1

Did you find a solution? – wyndham007 Jan 12 '21 at 12:01

score 0 · Answer 1 · answered Jun 30 '22 at 15:01

I think you have known the solution.

Based on these discussions https://github.com/mui/material-ui/issues/20184 https://github.com/mui/material-ui/issues/32477, the useScrollTrigger hook is not designed to listen to whether the component/node is scrolled or not.

It's designed to listen to whether the windows is scrolled or not.

Perhaps you could create a custom hook to detect whether the component/node is scrolled or not by following this discussion Detecting when user scrolls to bottom of div with React js.

Trigger Animation by scrolling to a predefined Component/Node

1 Answers1