如何在 React 中隐藏组件的 div 内的滚动？

Question

在一个 React 项目中，我在名为“History”的 div 中详细介绍了钱包滚动。问题是历史详细信息正在滚动没有任何问题，但是，我想隐藏在“历史”div 中。怎么可能做到？有什么合适的解决办法吗？

下面是代码参考

const navScrollStyle = makeStyles((theme) => ({
  root: {
    marginTop: "120px",
    display: "table",
    overflowY: "auto",
    maxWidth: "auto",
    display: "flex",
    justifyContent: "center"
  }
}));

const navBodyStyle = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    top: "0px",
    position: "absolute",
    width: "100%",
    height: "100vh",
    textAlign: "center",
    background: "white",
    zIndex: "9",
    height: "100%",
    overflowY: "auto"
  },
  menuButton: {
    marginRight: theme.spacing(2),
    color: "purple"
  },
  title: {
    flexGrow: 1,
    textAlign: "center",
    color: "black"
  }
}));

const gridClassStyle = makeStyles((theme) => ({
  root: {
    zIndex: "100",
    flexGrow: 1,
    position: "fixed",
    top: "0px",
    background: "white",
    flexWrap: "nowrap",
    boxShadow: "5px 10px 18px #888888"
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  },
  menuButton: {
    marginRight: theme.spacing(2),
    color: "purple"
  },
  title: {
    flexGrow: 1,
    textAlign: "center",
    color: "black"
  }
}));

const useStyles5 = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    },
    textAlign: "center",
    width: "100%"
  }
}));

const useStyles = makeStyles((theme) => ({
  root: {
    top: "20px",
    width: "100%",
    maxWidth: "auto"
  },
  nested: {
    paddingLeft: theme.spacing(4)
  }
}));

const TestPageScroll = () => {
  const navBody = navBodyStyle();
  const navScroll = navScrollStyle();
  const gridClass = gridClassStyle();

  const classes5 = useStyles5();

  const classes = useStyles();

  const NavPart = () => (
    <Grid className={gridClass.root} container spacing={3}>
      <Grid item xs={4} style={{ textAlign: "left" }}>
        <IconButton
          edge="start"
          className={gridClass.menuButton}
          color="inherit"
          aria-label="menu"
        >
          <Link to="/">
            <ArrowBackIcon />
          </Link>
        </IconButton>
      </Grid>
      <Grid
        item
        xs={4}
        style={{ textAlign: "center", justifyContent: "center" }}
      >
        <Typography variant="h6" className={gridClass.title}>
          <h2>Test Scroll</h2>
        </Typography>
      </Grid>
      <Grid item xs={4} style={{ textAlign: "right", marginTop: "2%" }}>
        <IconButton
          aria-label="account of current user"
          aria-controls="menu-appbar"
          aria-haspopup="true"
        >
          <AccountCircle style={{ fontSize: "30px" }} />
        </IconButton>
      </Grid>
    </Grid>
  );
  return (
    <div className={navBody.root}>
      {NavPart()}
      <div className={navScroll.root}>

      </div>

      {/* Here the main code begins */}
      <div style={{ height: "100px" }}>
        <div
          style={{
            position: "fixed",
            zIndex: "100",
            background: "white",
            width: "100%"
          }}
        >
          <h2>History</h2>
        </div>
        <hr />

        <List
          component="nav"
          aria-labelledby="nested-list-subheader"
          className={classes.root}
        >
          <>
            {/* Here purposely List are added to test overflow */}
            <div style={{ overflowY: "auto", background: "red" }}>
              <ListItem>
                <h6>Wallet History1</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />

              <ListItem>
                <h6>Wallet History</h6>
              </ListItem>
              <Divider />
            </div>
          </>
        </List>
      </div>
    </div>
  );
};

如下图所示，钱包历史详细信息清晰可见，我想将其隐藏在“历史”div中

这是供您参考的代码框链接：https://codesandbox.io/s/react-material-forked-71op5 页面加载时请点击“WALLET”按钮

Answer 1

问题是您的 History div 是 fixed 并且您的 Wallet History List div 没有边界 height 滚动到上面的 fixed divs 后面。解决此问题的一种方法是将height 限制为Wallet History List div，并将其设置为fixed。

例如。将这些样式添加到您的 div 列表中

maxHeight : "800px", position :"fixed", width:"100%"