Question

有人可以帮忙吗？这是我的代码：https://codesandbox.io/s/5xoj9zw56l

我遵循以下代码：https://codesandbox.io/s/6jr75xj8y3

Answer 1

抽屉创建一个元素，它将具有这样的结构

parent div > nested div > your data

在将引用放入抽屉时，您没有得到需要滚动的div引用。

您需要做的是可以将ref添加到数据div中，然后通过ref.parent进行操作，这样您将拥有父div ref，并且可以在其中滚动元素。

要滚动，您必须在应用溢出的位置具有div的引用。

这是您需要做的更改

代替容器，您将获得aprent元素

handleScrollTo = () => {

    console.log(this.container.parentElement.scrollTop);
    this.container.parentElement.scrollTop = 200;
  };

而不是使用滚动条上的数据在抽屉上使用ref

<Drawer open={this.state.left} onClose={this.toggleDrawer( "left", false)} onScroll={e=> console.log("scroll " + e.target.scrollTop)} >
  <div ref={el=> (this.container = el)} tabIndex={1} role="button" onKeyDown={this.toggleDrawer("left", false)} > {sideList} </div>
</Drawer>

Here is demo link

如何在Material UI React JS中以编程方式滚动抽屉？

1 个答案: