Scroll to top of Dialog

• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I’m rendering a pretty long component within the dialog, and am using the autoscroll functionality to get the overflow-y: auto styling in the dialog content. At certain points, the component moves to the the next step, and I would like to instantly go to the top of the dialog content.

I saw that jQuery’s scrollTop function can be used to get to the top of a component, but I’m unsure how to reference the dialogContent div. Please advise.

Current Behavior

Currently, when the component changes, the scroll remains the same, and the result is that the user sees a lower part of the new component.

Your Environment

Tech	Version
Material-UI	0.17.4
React	15.3.2
browser	Chrome
etc

[m2mathew]

If you want to manipulate the scrollPosition yourself programmatically, you need to use the Ref Callback pattern to have access to that DOM element directly.

Check StackOverflow and similar sources for other questions on how to use the library. 😄

[DzTheRage]

I was able to get this working using @achikin solution. Just nest a div inside of dialog content then render another dialog content.

<DialogContent>
   <div ref={node => {
	this.dialogContent = node;
      }}>
	<DialogContent className={classes.fixContentPadding}>
		Actual Content Here
	</DialogContent>
    </div>
</DialogContent>

handleNext = () => {
    /* Smooth scroll to top */
    this.dialogContent.scrollIntoView({
	behavior: 'smooth',
	block: 'start'
     });
    /* Go to next step */
     const { activeStep } = this.state;
     this.setState({
     activeStep: activeStep + 1
     });
};