CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
aye2m
aye2m

Reputation: 131

How to Programmatically Scroll Drawer in Material UI React JS?

Can someone please help? This is my code: https://codesandbox.io/s/5xoj9zw56l

I followed this code: https://codesandbox.io/s/6jr75xj8y3

Upvotes: 0

Views: 5836

Answers (1)

Just code
Just code

Reputation: 13791

Drawer creates an elements, it will have structure like this

parent div > nested div > your data

And while getting the ref into drawer you do not get that div reference which you need to scroll.

What you need to do is you can add ref to your data div and go through ref.parent this way you will have parent div ref and there you can scroll the element.

To scroll you must have ref of div where you applied the overflow.

Here is the changes you need to do

Instead of container you will get aprent element 

handleScrollTo = () => {

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

instead of using ref on drawer using the data on scroll

<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

Upvotes: 1

Related Questions