Question

我有一个简单的物品清单。

      <List>
        {this.state.initialList.map((item, index) => (
          <ListItem key={index} button>
            <ListItemText primary={item} />
          </ListItem>
        ))}
      </List>

如果我滚动到列表的底部并加载新列表，则滚动条将停留在底部。如何滚动回到列表顶部？

https://codesandbox.io/s/material-demo-l4i3s

在此沙箱中，滚动到底部，单击“加载”，列表显示新列表的最后一项。

Answer 1

不确定是否可以使用material-ui设置默认设置来执行此操作。但是您绝对可以应用一些React功能来使其正常工作。

查看有效的沙箱：https://codesandbox.io/s/material-demo-8ftqz

创建一个引用，该引用将指向列表的顶部：

  topOfList = React.createRef();

然后在列表组件中，在列表顶部返回一个跨度。给那个范围您创建的裁判。

      <List component="nav" aria-label="secondary mailbox folders">
        {<span ref={this.topOfList} />}
        {this.state.initialList.map((item, index) => (
          <ListItem key={index} button>
            <ListItemText primary={item} />
          </ListItem>
        ))}
      </List>

创建一个附加的处理程序，滚动到element / ref：

  scrollToTop = () => {
    if (this.topOfList.current) {
      this.topOfList.current.scrollIntoView();
    }
  };

最后，在设置状态回调中使用处理程序，以确保在数据加载后向上滚动。

this.setState({ initialList: newList }, () => this.scrollToTop())

Answer 2

滚动是由父div引起的。
您可以保存该div的引用，并在加载时使用scorllTo（）函数将滚动条置于顶部。

 <div ref={ref => this.divRef = ref} class="mylist">
          <List component="nav" aria-label="secondary mailbox folders">
            {this.state.initialList.map((item, index) => (
              <ListItem key={index} button>
                <ListItemText primary={item} />
              </ListItem>
            ))}
          </List>
 </div>

，然后在加载功能中：

  load = () => {
    const newList = [
      "new1",
      "new2",
      "new3",
      "new4",
      "new5",
      "new6",
      "new7",
      "new8",
      "new9",
      "new0"
    ];
    this.divRef.scrollTo(0,0);
    this.setState({ initialList: newList });
  };

您可以参考此CodeSandbox示例

列表数据更改时，材质UI列表滚动不会重置

2 个答案: