React / Material UI 的屏幕滚动卡住了

Question

所以我遇到了一个奇怪的问题，当我在移动设备上滚动时，我的网站变得粘滞，有时它可以让您滚动，而其他情况则不能。似乎无法弄清楚为什么，没有控制台错误或类似的东西。下面仅包含一些子网格组件的代码，但我有 9 个，它们都是相同的。用material-ui写在react中。

我认为问题在于 DOM 只加载了一些网格项目，然后加载更多并且滚动需要时间来调整。虽然让我产生疑问的是，当您滚动到底部时，即使状态没有任何变化，也会发生同样的问题。

如果您想亲自查看该问题，它托管在 https://brightspotblog-26d91.web.app/ 的 firebase 上。

return (
    <div className="App">
      <Grid
        container
        spacing={0}
        direction="column"
        alignItems="center"
        justify="center"
        style={{ minHeight: "100vh", overflowX: "hidden"}}
      >
        <StarfieldAnimation
          style={{
            position: "absolute",
            width: "100%",
            height: "100vh",
            zIndex: -10,
          }}
        />
        <Typography variant="h3" color="primary" style={{ padding: 25}} align="center">
          The Final Frontier
        </Typography>
        <Grid
          container
          item
          md={9}
          spacing={5}
          alignItems="center"
          direction="row"
        >
          <Grid item md={4}>
            <Card
              variant="outlined"
              style={{ backgroundColor: "transparent", borderColor: "white" }}
            >
              <CardContent>
                <Typography variant="h4" color="primary">
                  Mercury
                </Typography>
                <Typography color="primary">Terrestrial Planet</Typography>
                <Typography variant="body2" color="primary" component="p">
                Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets.
                </Typography>
              </CardContent>
              <CardActions>
                <Avatar alt="Mercury" src={Mercury} />
                <div style={{ flex: 1 }} />
                <Button color="primary" variant="outlined" >
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
          <Grid item md={4}>
            <Card
              variant="outlined"
              style={{ backgroundColor: "transparent", borderColor: "white" }}
            >
              <CardContent>
                <Typography variant="h4" color="primary">
                  Venus
                </Typography>
                <Typography color="primary">Terrestrial Planet</Typography>
                <Typography variant="body2" color="primary" component="p">
                Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. It is the second-brightest natural object in the night sky after Moon.
                </Typography>
              </CardContent>
              <CardActions>
                <Avatar alt="Venus" src={Venus}/>
                <div style={{ flex: 1 }} />
                <Button color="primary" variant="outlined" size="small">
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
          <Grid item md={4}>
            <Card
              variant="outlined"
              style={{ backgroundColor: "transparent", borderColor: "white" }}
            >
              <CardContent>
                <Typography variant="h4" color="primary">
                  Earth
                </Typography>
                <Typography color="primary">Terrestrial Planet</Typography>
                <Typography variant="body2" color="primary" component="p">
                Earth is the third planet from the Sun and the only astronomical object known to harbor life. Earth formed over 4.5 billion years ago.
                </Typography>
              </CardContent>
              <CardActions>
                <Avatar alt="Earth" src={Earth} />
                <div style={{ flex: 1 }} />
                <Button color="primary" variant="outlined" size="small">
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
          <Grid item md={4}>
            <Card
              variant="outlined"
              style={{ backgroundColor: "transparent", borderColor: "white" }}
            >
              <CardContent>
                <Typography variant="h4" color="primary">
                  Mars
                </Typography>
                <Typography color="primary">Terrestrial Planet</Typography>
                <Typography variant="body2" color="primary" component="p">
                Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, larger than only Mercury. 
                </Typography>
              </CardContent>
              <CardActions>
                <Avatar alt="Mars" src={Mars} />
                <div style={{ flex: 1 }} />
                <Button color="primary" variant="outlined" size="small">
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </div>
  );

Answer 1

尝试以下方法：

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

在您的 app.css 或全局样式表中。我知道我在材料 ui 上遇到过几次这个问题