使用 Material-UI 在 ReactJS 中创建滚动状态

Material-UI 是一个流行的 React UI 库，它提供了许多易于使用的组件来构建美观的用户界面。在这里，我们将了解如何使用 Material-UI 来创建滚动状态。

步骤 1：安装 Material-UI

首先，我们需要在我们的 React 项目中安装 Material-UI。您可以使用下面的命令来安装它：

npm install @material-ui/core

步骤 2：引入所需的组件

现在，我们可以在 React 组件中引入 Material-UI 组件。在这里，我们将使用 List 和 ListItem 组件来创建滚动状态：

import { List, ListItem, ListItemText } from '@material-ui/core';

function ScrollStatus() {
  return (
    <List>
      <ListItem>
        <ListItemText primary="Item 1" />
      </ListItem>
      <ListItem>
        <ListItemText primary="Item 2" />
      </ListItem>
      <ListItem>
        <ListItemText primary="Item 3" />
      </ListItem>
      <ListItem>
        <ListItemText primary="Item 4" />
      </ListItem>
      <ListItem>
        <ListItemText primary="Item 5" />
      </ListItem>
      <ListItem>
        <ListItemText primary="Item 6" />
      </ListItem>
      <ListItem>
        <ListItemText primary="Item 7" />
      </ListItem>
    </List>
  );
}

export default ScrollStatus;

以上代码中，我们只是简单地创建了一个具有 7 个项目的列表。接下来，我们将使它滚动。

步骤 3：添加样式

对于滚动状态，我们需要为列表添加样式。 Material-UI 提供了一个 makeStyles 函数来定义自定义样式。我们可以使用它来添加负边距和溢出样式：

import { makeStyles, List, ListItem, ListItemText } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
    position: 'relative',
    overflow: 'auto',
    maxHeight: 200,
  },
  ul: {
    padding: 0,
  },
  listItem: {
    paddingBottom: 0,
    paddingTop: 0,
  },
}));

function ScrollStatus() {
  const classes = useStyles();

  return (
    <List className={classes.root}>
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19].map(item => (
        <ListItem key={`item-${item}`} className={classes.listItem}>
          <ListItemText primary={`Item ${item}`} />
        </ListItem>
      ))}
    </List>
  );
}

export default ScrollStatus;

在此代码中，我们为 List 添加了一个 root 类，该类描述了列表的样式。我们使用了 makeStyles 函数来定义其中的样式。 position 属性设置为 relative，以便用于为滚动状态创建上下文，而 overflow 属性设置为 auto，以便启用滚动。

步骤 4：添加滚动状态

现在，我们的列表可以滚动了。我们需要在 List 组件上添加 component 和 ref 属性来获得滚动状态。在 React 中，可以通过 useRef 钩子来创建一个 ref，它可以用于确定是否需要使用滚动：

import { useRef, useEffect, makeStyles, List, ListItem, ListItemText } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
    position: 'relative',
    overflow: 'auto',
    maxHeight: 200,
  },
  ul: {
    padding: 0,
  },
  listItem: {
    paddingBottom: 0,
    paddingTop: 0,
  },
}));

function ScrollStatus() {
  const classes = useStyles();
  const listRef = useRef(null);
  const [showTop, setShowTop] = useState(false);
  const [showBottom, setShowBottom] = useState(true);

  useEffect(() => {
    if (listRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = listRef.current;
      setShowTop(scrollTop > 0);
      setShowBottom(scrollHeight - scrollTop - clientHeight > 0);
    }
  }, [listRef]);

  return (
    <div>
      <List ref={listRef} className={classes.root} component="nav">
        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19].map(item => (
          <ListItem key={`item-${item}`} className={classes.listItem}>
            <ListItemText primary={`Item ${item}`} />
          </ListItem>
        ))}
      </List>
      {showTop && (
        <Button onClick={() => listRef.current.scrollTo(0, 0)}>Top</Button>
      )}
      {showBottom && (
        <Button onClick={() => listRef.current.scrollTo(0, listRef.current.scrollHeight)}>Bottom</Button>
      )}
    </div>
  );
}

export default ScrollStatus;

在上述代码中，我们创建了一个 listRef 来获得 List 的引用，我们使用该引用来监测目前是否可以向上或向下滚动。

我们添加了一个 useEffect 钩子函数，它检查 scrollTop，scrollHeight 和 clientHeight 属性，以确定滚动状态。并使用 showTop 和 showBottom 状态来显示或隐藏“Top”和“Bottom”按钮。

步骤 5：测试代码

现在，我们已经创建了滚动状态处理程序，请运行您的应用程序并测试滚动状态。您应该可以看到“Top”按钮仅在滚动列表到达顶部时出现，而“Bottom”按钮只出现在滚动列表到达底部时。

以上是使用 Material-UI 在 ReactJS 中创建滚动状态的所有步骤。