Html 反应/材料界面的屏幕滚动卡住

所以我遇到了一个奇怪的问题，当我在手机上时，在我的网站上滚动会变得粘乎乎的，因为有时候它允许你滚动，而其他人则不允许。似乎无法找出原因，没有控制台错误或类似的东西。下面包含了一些子网格组件的代码，但我有9个，它们都是相同的。用react-with-material用户界面编写

我认为问题在于DOM只加载了一些网格项，然后加载更多，滚动需要时间来调整。虽然当你滚动到底部时，我会想到一个问题，同样的问题会发生，即使状态没有改变

如果您想亲自查看该问题，请访问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>
  );

返回(
最后的边界
水星
类地行星
水星是太阳系中最小、最内层的行星。它绕太阳运行的时间为87.97天，是所有行星中最短的。
了解更多
维纳斯
类地行星
金星是太阳的第二颗行星。它以罗马爱美女神的名字命名。它是夜空中仅次于月亮的第二明亮的自然物体。
了解更多
土
类地行星
地球是距离太阳第三颗行星，也是已知唯一有生命存在的天体。地球形成于45亿年前。
了解更多
火星
类地行星
火星是离太阳第四远的行星，也是太阳系中第二小的行星，比水星还要大。
了解更多
);

尝试以下操作：

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

---

在app.css或全局样式表中。我知道我已经在material ui中遇到过几次这个问题，它也可能与overFlowX有关：Hidden不幸没有改变任何东西。编辑：等等，溢出X可能是它的来源。我想我已经检查过了，但乍一看它似乎起作用了！是的，我相信不管是什么原因，overFlowX都会有这种效果